The principle and implementation of Ajax uploading files

Ajax has been very common, but the use of Ajax upload files themselves have not been involved, I only know very complicated, upload files different from the upload of general form data, must be special processing, know that the general Ajax use upload is a virtual iframe application, but because the project needs, in the online search, Did not expect to find two Ajax upload files to support the jquery plugin, jquery.uploadify.js and dropzone.min.js Two can be implemented Ajax upload files, the effect is good.

1 uploading files using jquery.uploadify.js

This way of uploading, using flash, it is necessary to reference a special JS file swfobject.js, the lower version of the need to refer to the high version of this file has been included in the jquery.uploadify.js. In addition, the parameters of the lower version and the higher version of the parameters are not the same.

Full foreground code using the Uploadify v3.2.1

The writing of Uploadify v2.1.0
Because there is no swfobject.js, you need to add a reference
    <script src= "Scripts/swfobject.js" type= "Text/javascript" ></script>
Other parameters are also different, such as Uploader,script
Full foreground code

2 Uploading files using Dropzone.min.js
Do not use Flash, but the browser requirements are relatively high, such as IE10 above support, should be the use of HTML5 technology
Full front-end code,
public class Handler1:ihttphandler    {public        void ProcessRequest (HttpContext context)        {             string Operatype = context. request.querystring["Operationtype"];             if (Operatype = = "Upfile")             {                 Httppostedfile file = context. request.files["FileData"];                 if (file = null)                 {                     string fullPath = System.IO.Path.Combine (System.IO.Path.Combine ( AppDomain.CurrentDomain.BaseDirectory, "Update"), DateTime.Now.Date.ToString ("YyyyMMdd"));                     File. SaveAs (FullPath + file. FileName);                                  }             }            Context. Response.ContentType = "Text/plain";            Context. Response.Write ("Upload succeeded");        }        public bool IsReusable        {            get            {                return false;    }}}



Source code Download


The principle and implementation of Ajax uploading files