Flash upload file (combined with ASP.)

first, the realization principle.
In some cases, we need to use Flash for "file upload", because flash can produce a rich and expressive UI interface.

(conceited and ignorant I do a supplement here: Flash uses the flash.net package filereference is can send file data to a asp,asp.net or PHP page, can see the Prodigal's [Flash FileUpload] using flash.net.FileReference to implement ASP. NET-no-refresh file uploads , CodeProject has such an example: multiple file Upload with Progress Bar The Help for Using Flash and Asp.net,flash8 has a detailed description of filereference and examples. )

So this article is to use another method to achieve the Flash file upload, the article Flash upload file implementation principle is:

Through the flash and JavaScript Communication in the page (this is flash->javascript), call JavaScript control a hidden file containing the domain of the form, send the file data to the Background program page (asp,aspx,php, etc.), The background program receives the uploaded file data, carries on the preservation and so on processing, the final feedback information to Flash (this time is Javascript->flash).

Let's take a look at the following:

This is a flash interface, you can "implement file upload" and the corresponding prompt (success/failure), the following we have to create such a program.

Second, the preparatory work.
The purpose of this article is to teach you to create such a function of the Flash program, before proceeding, we need some technical preparation, we need to know:
· How does flash invoke JavaScript in an HTML page?
· How does JavaScript send data to flash?

1. How does flash invoke JavaScript in an HTML page? (Flash->javascript)
Two methods are described below:
A. Use the GetURL function in Flash:

GetURL (url:string, [window:string, [method:string]])  :  void

Loads a document from a specific  URL  into the window, or passes the variable to another application that is located in the  URL  that is defined. To test this function, make sure that the file you want to load is at the specified location. To use absolute  url (for example, http://www.myserver.com), you need a network connection.

Availability: flash player 4;actionscript 1.0

Parameter
url:string -  You can get documents from here   Url.

window:string [Optional] -  Specifies the window or  HTML  frame into which the document should be loaded. You can enter the name of a particular window, or select from the following reserved target name:  

_self  Specifies the current frame in the current window.  
_blank  specifies a new window.  
_parent  Specifies the parent of the current frame.  
_top  Specifies the top-level frame in the current window.  
method:string [optional] -  for sending variables  GET  or  POST  methods. If there are no variables, this parameter is omitted. The get  method attaches a variable to the end of  URL , which is used to send a small number of variables. The post  method sends a variable in a separate  HTTP  header, which is used to send a long string of variables.

The literal meaning of the GetURL function is to open the specified Web page in the specified HTML page frame.
Here, we write URL URLs as a JavaScript script that can be executed on the page, such as:
GetURL ("Javascript:alert (' OK ')");
The execution effect of this sentence is equivalent to that in HTML:

<script>
Alert ("OK");
</script>

Using the Geturl function in Flash, you can invoke any JavaScript script in the current HTML page.

B. Use the Fscommand function in Flash:
fscommand(Command:string, parameters:string): Void

In a Web browser, a fscommand() JavaScript function is called after execution moviename_DoFScommand , which is located in the Web page that contains the SWF file. Moviename is the EMBED NAME id attribute of the property or label used for the label OBJECT .
For example, if we specify the id= of the object tag for the SWF file myMovie , the JavaScript function is called myMovie_DoFScommand .
In this usage, command and the parameters argument can be any string or expression.

As executed in Flash:

Fscommand ("Upload", "" ");

In the Web page:

function flashupload_dofscommand (command, args) {
}

function will be executed, the parameters of the two functions correspond in sequence, that is, there will be command= "upload", args= "";

In addition, when using Fscommand in a Web page, you should also specify a parameter swliveconnect=true, such as:

<object classid= "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase= "http://fpdownload.macromedia.com/pub/ shockwave/cabs/flash/swflash.cab#version=8,0,0,0 "width=" 445 "height=" "id=" Flashupload "align=" Middle ">
<param name= "movie" value= "flashupload.swf"/>
<param name= "allowscriptaccess" value= "Always"/>
<param name= "Swliveconnect" value= "true"/>
<embed src= "flashupload.swf" width= "445" allowscriptaccess= "Always" height= "" Name= "Flashupload" align= "Middle" Type= "Application/x-shockwave-flash" pluginspage= "Http://www.macromedia.com/go/getflashplayer "Swliveconnect= "true"/>
</object>

The Swliveconnect property means that specifying this parameter causes Flash Player to start Java the first time it is loaded, so that Fscommand can work.

2. How does JavaScript send data to flash? (Javascript->flash)
The method is to use setvariable in JavaScript.
Syntax : setvariable (variableName, value)

Following the execution of this JavaScript script, the variable value named Txtbox in Flash is modified to "1234":

var flash = document.getElementById ("Flashobjectid");
Flash. SetVariable ("Txtbox", "1234");

For more information on flash and JavaScript communication, here's what to look for:
The communication between JavaScript and Flash
Flash-to-javascript communication

Third, make Flash.
Start Flash, create a new blank document named: FLASHUPLOAD.FLA;



As shown, the scene background color is set to green and then two "dynamic text" boxes are placed:
The text box variable with the border above is set to: file, make a "Browse" button and its combination later imitate the domain of the Web page;
The text box variable below is set to: MSG, which is used to display the prompt message;
Finally there is an "upload" button.

Add code on the browse button:


Add code on the upload button:


Here flash to JavaScript communication I used the Fscommand,fscommand parameter content can be arbitrary, we let the "Browse" button passed "browser" string past, "upload" button passed "Upload" string. The following Web pages perform different actions based on the two strings. When using Geturl, the browser produces a "clatter" sound, and using fscommand does not produce sound.

After completion save, compile (ctrl+enter), generate flashupload.swf file.

Iv. Insert the flashupload.swf file into the flashupload.html file.
Create an HTML file: flashupload.html, insert flashupload.swf, and write a JavaScript function that responds to the Fscommand command:flashupload_ Dofscommand, the full HTML file content is as follows:

Here is to notice the use of some variables and values, I have a different color to do the logo. The next upload.aspx file to appear is placed in a wide, high, border 0 iframe, to achieve the hidden effect.

When fscommand in Flash is executed, the flashupload_dofscommand function in the Web page is executed, which in turn operates on the hidden iframe for file uploads.

Five, upload.aspx: File Save page.

<%@ page language= "C #"%>
<script runat= "Server" >
protected override void OnLoad (EventArgs e){
if (IsPostBack)
{
String msg = string. Empty;
Try
{
if (File1.PostedFile.ContentLength > 0)
{
The file legitimacy is judged and then saved.
//
File1.PostedFile.SaveAs (@ "C:\abc.ext");

msg = "File" + File1.PostedFile.FileName.Replace (@ "\", @ "\") + "(" + File1.PostedFile.ContentLength.ToString () + "bytes) upload succeeded. ";
}
Else
{
msg = ("Please select a valid file.");
}
}
Catch
{
msg = "File upload failed.";
}

This. RegisterClientScriptBlock ("Setflash", "<script>setflash (' msg ', '" + msg + "');<" + "/script>");
}
}
</script>

<title>SaveFile</title>
<script language=javascript>
Javascript->flash
var flash = parent.document.getElementById (" Flashupload");
function Setflash (obj,value)
{
        flash. SetVariable (Obj, value);
    }
    </script>
<body bgcolor= "#99ff33";
     <form id= "Form1"  runat= "Server";
    <div>
        <input id= "File1"  runat= "Server"  type= "file"  onchange= "Setflash (' file ', this.value);" /></div>
    </form>
</body>

The content of the

page is simple enough to receive data and save it, and the results are as follows:

Because the submission of the form in this page is made via flash calling JavaScript script, there is no submit button on this page, if there is a submit button, The page itself should be able to upload files. The last page is placed in a hidden iframe frame and is not visible to the user.  

You need to be aware that this page uses setvariable to send data to flash (feedback information). The overall effect of

After completion is the one at the beginning of this article.

This example is produced under flash8+.net1.1 and tested for adoption under IE.
 
Complete source code download (122K) >> 


(due to the special nature of file uploads, flash upload files must be so "troublesome" to call JavaScript and hidden forms to complete.) In addition, Flash is supported for direct post data to an ASPX page, such as using the sendandload method. In addition, foreign flash customers have written a Yamzbrowser Flash plugin, can use Flash to achieve file upload function, but the principle is based on this. )