Вы довольно привязаны к Flash, чтобы предоставить пользователю визуальную информацию о ходе загрузки. Вы можете создать весь пользовательский интерфейс в jQuery, но в конечном итоге это будет компонент Flash, который отправляет файлы на сервер и сообщает о ходе загрузки.
Это пока самая проверенная и стандартная процедура.
Gmail использует его.
edit: вот исходный код пользовательского решения, которое я использую.
</p>
<pre><code><mx:Script>
<![CDATA[
// initializes properties defined by user can be reset on runtime
//private const FILE_UPLOAD_URL:String = "http://carloscidrais.netxpect.dev/uploader.php";
//private var imagesFilter:FileFilter = new FileFilter("Allowed Files", "*.jpg;*.jpeg;*.gif;*.png");
// for calling external javascript
import flash.external.*;
// initializes properties for the upload streams
private var myFileRef:FileReferenceList = new FileReferenceList();
private var item:FileReference;
private var fileListInfo:Array = new Array();
private var fileListDoneSoFar:int = 0;
private var fileNumber:int = 0;
// Runs when user clicks the upload button
// **
// **
private function browseAndUpload():void {
myFileRef = new FileReferenceList();
myFileRef.addEventListener(Event.SELECT, selectHandler);
// get user variables
var params:URLVariables = new URLVariables();
params.allowed_files = Application.application.parameters.allowed_files;
var imagesFilter:FileFilter = new FileFilter("Allowed Files", params.allowed_files);
myFileRef.browse([imagesFilter]);
uploadCurrent.text = "";
progressBar.visible = false;
cancelButton.visible = false;
}
// Runs when user clicks the cancel button
// **
// **
private function cancel():void {
item.cancel(); // cancels current upload item
progressBar.label = "canceled";
uploadButton.enabled = true;
cancelButton.visible = false;
reset();
}
// Resert all variables to allow files to be sent again
// **
// **
private function reset():void {
fileListInfo.length = 0;
fileNumber = 0;
fileListDoneSoFar = 0;
}
// Nice error IO event handler
// **
// **
private function ioErrorHandler(evt:IOErrorEvent):void {
item.cancel();
uploadButton.enabled = true;
cancelButton.visible = false;
progressBar.label = "io error";
if(fileListDoneSoFar==0)
uploadCurrent.text = "Error: Check upload permissions!";
else
uploadCurrent.text = "Error: Check network!";
reset();
}
private function javascriptComplete():void {
var javascriptFunction:String = "galeryUploadComplete("+Application.application.parameters.opt+")";
ExternalInterface.call(javascriptFunction);
}
// Counts the total upload size and returns it in bytes
// @param Object:FileReferenceList
// @return int
private function getTotalUploadBytes(files:Object):int {
var size:int = 0;
for(var i:int = 0; i<files.fileList.length; i++)
size += files.fileList[i].size;
return size;
}
// Returns a good byte formating
// @param int bytes
// @return string nice value
private function returnHumanBytes(size:int):String {
var humanSize:String = "";
if(size>1048576) {
numberFormater.precision = 2;
humanSize = numberFormater.format(size/1024/1024)+"MB";
}
else {
numberFormater.precision = 0;
humanSize = numberFormater.format(size/1024)+"KB";
}
return humanSize;
}
// Handler that runs when user selects the files
// **
// **
private function selectHandler(evt:Event):void {
try {
progressBar.visible = true;
cancelButton.visible = true;
progressBar.label = "0%";
uploadButton.enabled = false;
fileListInfo["numfiles"] = myFileRef.fileList.length;
fileListInfo["totalsize"] = getTotalUploadBytes(myFileRef);
uploadFile();
} catch (err:Error) {
uploadCurrent.text = "Error: zero-byte file";
}
}
// When all files are uploaded resets some variables
// **
// **
private function allFilesUploaded():void {
progressBar.label = "100%";
if(myFileRef.fileList.length==1)
uploadCurrent.text = "File uploaded successfully!";
else
uploadCurrent.text = "All "+myFileRef.fileList.length+" files uploaded successfully!";
uploadButton.enabled = true;
cancelButton.visible = false;
reset();
}
// Uploads all files that were inserted in a linear order
// @param null
// @return void
private function uploadFile():void {
if(fileNumber>=fileListInfo["numfiles"]) {
allFilesUploaded();
}
else {
item = myFileRef.fileList[fileNumber];
uploadCurrent.text = item.name;
item.addEventListener(ProgressEvent.PROGRESS, progressHandler);
item.addEventListener(Event.COMPLETE, completeHandler);
item.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
// get user variables
var params:URLVariables = new URLVariables();
params.opt = Application.application.parameters.opt;
params.ssid = Application.application.parameters.ssid;
params.upload_url = Application.application.parameters.upload_url;
// makes this a post request and sends allong both the ID and PHP_SESSION along
var request:URLRequest = new URLRequest(params.upload_url);
request.method = URLRequestMethod.POST;
request.data = params;
item.upload(request);
fileNumber++;
}
}
private function progressHandler(evt:ProgressEvent):void {
uploadCurrent.text = evt.currentTarget.name;
progressBar.setProgress(fileListDoneSoFar+evt.bytesLoaded, fileListInfo["totalsize"]);
progressBar.label = numberFormater.format(((fileListDoneSoFar+evt.bytesLoaded)*100/fileListInfo["totalsize"])*0.98)+"%";
}
private function completeHandler(evt:Event):void {
javascriptComplete();
fileListDoneSoFar += evt.currentTarget.size;
uploadFile();
}
]]>
</mx:Script>
<mx:NumberFormatter id="numberFormater" rounding="up" />
<mx:Canvas x="0" y="0" width="280" height="70" borderColor="#EFEFEF" backgroundColor="#EFEFEF">
<mx:Button id="uploadButton" label="upload files (max. 50MB)"
click="browseAndUpload();" x="2" y="25" fontSize="10" fontFamily="Arial" width="167"/>
<mx:Button id="cancelButton" click="cancel();" visible="false" y="25" label="cancel" width="96" fontFamily="Arial" x="182"/>
<mx:ProgressBar mode="manual" x="2" y="1" id="progressBar" visible="false" labelPlacement="center" width="276" height="19" fontSize="9"/>
<mx:Label id="uploadCurrent" x="2" y="51" width="276" text=""/>
</mx:Canvas>