Baidu flash HTML5 self-switch multi-file asynchronous upload Control Webuploader basic usage

Dual-core browser in the Chrome kernel using uploadify There are 302 problems, do not know how to fix, the reason why like 360 browser is to help customers control the rendering kernel:

If the page needs to be the default speed core, add Tags: <meta name= "renderer" content= "WebKit" > if the page needs to default with IE compatible kernel, add Tags: <meta name= "renderer" content= " Ie-comp "> If the page needs to default with IE standard kernel, add tag: <meta name=" renderer "content=" Ie-stand ">

To solve the 302 problem is also very simple, is HTML5 file upload, just recently in Ueditor see Baidu Webuploader, will automatically choose Flash HTML5, is a mature solution.

Looking at the front end, we encapsulate the most common operations as plug-ins, and it is best to use the absolute path relative to the application in ASP. NET and MVC, define the global Applicationpath:var Applicationpath = "@ (Href (" ~ ") = ="/"?" " : Href ("~")) ";

Front-End Code:

(Function ($, applicationpath) {var Applicationpath = Applicationpath = = = ""? ": Applicationpath | | "..    /.."; function Initwebupload (item, options) {var defaults = {hiddeninputid: "Uploadifyhiddeninputid",//INP  UT Hidden ID onallcomplete:function (event) {},//callback function executed after all file uploads Oncomplete:function (event) {},//Each file callback function Inneroptions: {}, filenumlimit:undefined, Filesizelimit:undefine        D, filesinglesizelimit:undefined};        var opts = $.extend ({}, defaults, options);        var target = $ (item);        var Pickerid = Guidgenerator (). Replace (/-/g, ""); var uploaderstrdiv = ' <div class= ' webuploader ' > ' + ' <div id= ' thelist ' class= ' uploader-list ' ></di            V> ' + ' <div class= "btns" > ' + ' <div id= "' + Pickerid + '" > select File </div> ' +    ' <a id= "ctlbtn" class= "btn Btn-default" > Start uploading </a> ' +        ' </div> ' + ' </div> ';        Target.append (UPLOADERSTRDIV);             var $list = target.find (' #thelist '), $btn = Target.find (' #ctlBtn '), state = ' pending ',        Uploader        var jsondata = {fileList: []}; var webuploaderoptions = $.extend ({//SWF file path Swf:applicationpath + '/scripts/lib/webuploader/uplo            Ader.swf ',//File receive server. Server:applicationpath + '/mvcpages/webuploader/process ',//Select the File button.            Optional.            The internal is created according to the current run, either the INPUT element or flash.            Pick: ' # ' + Pickerid,//Do not compress the image, the default if it is JPEG, file upload will be compressed before uploading! Resize:false, FileNumLimit:opts.fileNumLimit, FileSizeLimit:opts.fileSizeLimit, Filesi        NgleSizeLimit:opts.fileSingleSizeLimit}, Opts.inneroptions);        var uploader = webuploader.create (webuploaderoptions);     Uploader.on (' filequeued ', function (file) {       var $list = $ ("#thelist"); $list. Append (' <div id= ' + file.id + ' "class=" item "> ' + ' <div class=" info "> ' + file.name + ' &L T;/div> ' + ' <div class= "state" > Wait to upload ...</div> ' + ' <div class= "del" ></        Div> ' + ' </div> ');        });  Uploader.on (' uploadprogress ', function (file, percentage) {var $li = $ (' # ' + file.id), $percent            = $li. Find ('. Progress. Bar ');                    Avoid repeatedly creating if (! $percent. length) {$percent = $ (' <span class= "Progress" > ' + ' <span class= ' percentage ' ><span class= ' text ' ></span> ' + ' <span class= ' bar ' role = "ProgressBar" style= "width:0%" > ' + ' </span></span> ' + ' </span> '). AP            Pendto ($li). Find ('. Bar ');            } $li. Find (' div.state '). Text (' in-upload '); $li. Find (". Text"). Text (percentage * 100 + '% ');        $percent. css (' width ', percentage * 100 + '% ');        });            Uploader.on (' uploadsuccess ', function (file, response) {$ (' # ' + file.id). Find (' div.state '). Text (' uploaded ');                var fileevent = {queueId:file.id, name:file.name, Size:file.size,            Type:file.type, FilePath:response.filePath};        JsonData.fileList.push (fileevent) opts.oncomplete (fileevent);        });        Uploader.on (' Uploaderror ', function (file) {$ (' # ' + file.id). Find (' div.state '). Text (' upload error ');        });            Uploader.on (' uploadcomplete ', function (file) {$ (' # ' + file.id). Find ('. Progress '). FadeOut ();            var fp = $ ("#" + Opts.hiddeninputid);            Fp.val (Json.stringify (jsondata));        Opts.onallcomplete (jsondata.filelist);        });      Uploader.on (' filequeued ', function (file) {uploader.upload ();  });        Uploader.on (' filesqueued ', function (file) {uploader.upload ();        });            Uploader.on (' All ', function (type) {if (type = = = ' Startupload ') {state = ' uploading ';            } else if (type = = = ' Stopupload ') {state = ' paused ';            } else if (type = = = ' uploadfinished ') {state = ' done ';            } if (state = = = ' uploading ') {$btn. Text (' pause upload ');            } else {$btn. Text (' Start upload ');        }        });            $btn. On (' click ', function () {if (state = = = ' uploading ') {uploader.stop ();            } else {uploader.upload ();        }        });            Delete $list. On ("click", ". Del", function () {var $ele = $ (this);            var id = $ele. Parent (). attr ("id");            var deletefile = {}; $.each (jsondata.filelist, function (index, item) {if (item &&Item.queueid = = = id) {DeleteFile = JsonData.fileList.splice (index, 1) [0];                    $ ("#" + Opts.hiddeninputid). Val (json.stringify (Jsondata));                    $.post (/* self-sends processing delete instruction */, function (returndata) {$ele. Parent (). remove ();                    });                Return        }            });    });        } $.fn.powerwebupload = function (options) {var ele = this;        $.lazyload (Applicationpath + "/scripts/lib/webuploader/webuploader.css", function () {}, ' CSS '); $.lazyload (Applicationpath + "/scripts/lib/webuploader/webuploader.min.js", function () {Initwebupload (Ele, op        tions);    }); }}) (JQuery, Applicationpath);

　　

The MVC version of Back-end file reception, even if you are ASP. NET introduces MVC to do Ajax is also possible:

Using system;using system.collections.generic;using system.io;using system.linq;using System.Web;using System.web.mvc;namespace formdesigner{public class Webuploadercontroller:basecontroller {public actionres Ult Process (string ID, string name, String type, string lastmodifieddate, int size) {string Filepathnam E = string.            Empty; String URLPath = ".. /..            /app_upload/document ";            String localPath = Path.Combine (Httpruntime.appdomainapppath, "app_upload\\document"); if (Request.Files.Count = = 0) {return Json (new {JSONRPC = 2.0, error = new {code = 102, Messa            GE = "Save Failed"}, id = "id"});            } try {filepathname =//Handle file Save} catch (Exception)            {return Json (new {JSONRPC = 2.0, error = new {code = 103, message = "Save Failed"}, id = "id"}); } return Json (new {JSONRPC = "2.0", id = "id", FilePath = URLPath + "/" + filepathname}); }    }}

　　

The page backstage to deal with the content of hiddenfiled.