用于附加功能的最佳多图像上传器

Question

让我更好地解释一下这个标题。 我正在寻找的是一个可以上传多个图像的图像上传器（大约 200 个是理想的）。图像上传器需要能够处理：

a) 某种进度指示器
b) 发送上传的文件 通过脚本调整它们的大小并删除原始文件

现在，我想这是在某个地方，通过我的谷歌搜索产生了不好的结果。 有没有人有过对此有用的经验？ jQuery 是理想的选择，但不是必需的。

Answer 1

您与 Flash 密切相关，为用户提供有关上传进度的视觉反馈。您可以在 jQuery 上设计整个 UI，但最终它将是一个 Flash 组件，将文件发送到服务器并报告上传进度。

这是迄今为止经过最多测试和标准的程序。

Gmail 使用它。

编辑：这是我使用的自定义解决方案的源代码。

<代码>

<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>

<代码>

Answer 2

您可以使用 swFupload（Google swfupload）来完成此操作。

使用 jQ swfUpload 插件将使它更容易在代码中使用：

http://blogs.bigfish.tv/adam/2009/06/14/swfupload-jquery-plugin/