File Upload ~ Uploadify upload control ~ Resume (Multifile upload), file upload uploadify

File Upload ~ Uploadify upload control ~ Resume (Multifile upload), file upload uploadify

I have already talked about Uploadify File Upload once before (File Upload ~ Uploadify upload control), but does not involve the upload of multiple files. This time, we mainly talk about the upload of multiple files. First, we need to understand a concept, the Multifile upload front-end Uploadify calls our backend upload program through training. Therefore, there is nothing unusual for Multifile upload.

The following is a thumbnail of the uploaded file:

List Assembly uses JS templates, which can reduce the occurrence of spelling errors for complicated HTML structures. Closing is to remove the LI element from the UI element, and at the end of the submission, check the LI element from the UI, assemble it, and send the following code:

I. HTML Template

<Script type = "text/html" id = "liTemp"> <li> <! -- Status after upload --> <div class = "VedioChange"> <dl> <dt> <a href = "javascript :; ">  <span class =" playIcon "> </ span> </a> <input type = "hidden" name = "HdFileURL" value = "{FilePath}"/> <br/> <input type = "hidden" name = "HdImagePath" value = "{ImagePath}"/> <br/> <input type = "hidden" name = "HdSourceName" value = "{SourceName}"/> <br/> <input type = "hidden" name = "HdFileS Ize "value =" {FileSize} "/> <br/> </dt> <dd> <a href =" javascript :; "class =" lookBig "> preview </a> & nbsp; <a href =" javascript:; "class =" reselect "onclick =" del (this) "> close </a> </dd> </dl> </div> <! -- Status after upload --> </li> </script>

Ii. uploadfiy code

<Script type = "text/javascript"> $ (document ). ready (function () {$ ("# uploadify "). uploadify ({'uploader': 'js/jquery. uploadify-v2.1.4/uploadify.swf ', 'script': 'uploadhandler. ashx', 'canonicalmg ': 'js/jquery. uploadify-v2.1.4/cancel.png ', 'folder':'/UploadFile/', 'queueid': 'filequeue', 'auto': true, 'Multi ': true, 'oncomplete ': function (event, queueID, fileObj, response, data) {// triggered when a single file is uploaded: The event object // ID: the unique representation of the file in the file queue // fileObj: the object of the selected file, the list of attributes/[name]-name of the uploaded file/[filePath]-path of the uploaded file on the server/[size]-University of the file, the Unit is byte // [creationDate]-file creation date // [modificationDate]-file last modification date // [type]-file extension, '. 'Start // response: the Response text returned by the server. Here I return the processed file name/data: file queue details and general data uploaded to the file $ ("# preview "). append (dataTemplate ($ ("# liTemp "). text (), {src: response, alt: fileObj. name}) ;}, 'on Error ': function (event, queueID, fileObj) {// when a single file upload Error occurs, alert ("file:" + fileObj. name + "Upload Failed! ") ;},}) ;}); Function del (o) {$ (o). closest (" li "). remove () ;}</script>

3. html code

<div class="rt">    <ul class="clearfix w_VedioChange" id="preview">    </ul></div><div id="fileQueue"></div>

4. ashx code

    /// <summary>    /// Summary description for UploadHandler    /// </summary>    public class UploadHandler : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            context.Response.Charset = "utf-8";            HttpPostedFile file = context.Request.Files["Filedata"];            string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]);            if (file != null)            {                if (!Directory.Exists(uploadPath))                {                    Directory.CreateDirectory(uploadPath);                }                file.SaveAs(Path.Combine(uploadPath, file.FileName));                var pathArr = uploadPath.Split('\\');                context.Response.Write(HttpContext.Current.Request.Url.Scheme                    + "://"                    + HttpContext.Current.Request.Url.Authority                    + "/"                    + pathArr[pathArr.Length - 2]                    + "/"                    + pathArr[pathArr.Length - 1]                    + "/"                    + file.FileName);            }            else            {                context.Response.Write("0");            }        }        public bool IsReusable        {            get            {                return false;            }        }    }

This example only briefly describes the file upload function. If it is used in a real project, further code design is required.

When uploadify uploads multiple files, how can I determine the speed at which code can be initiated after the upload is complete?

You can use this function 'onuploadsuccess': function (file, data, response) {} to determine whether data is returned in the background after the upload is complete;
"After the upload is complete, submitting the form will speed up code initiation." Can you enter this sentence in vain!

With jquery's uploadify, the file upload control cannot be displayed. Why?

<Div id = "fileQueue"> </div> Add this
<P>
<Input type = "file" id = "uploadify" name = "uploadify"/>
</P>
If Firefox is used, the Browse cannot be displayed.
Can you post a picture.