首先一定要引入:jquery.js 然后是webuploader的一個 css和還一個js 三個必須引用。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <link href="webuploader-0.1.5/webuploader.css" rel="stylesheet" /> <script src="webuploader-0.1.5/webuploader.js"></script> <script type="text/javascript"> $(document).ready(function () { var uploader = WebUploader.create({ // swf文件路徑 swf: 'webuploader-0.1.5/Uploader.swf', // 文件接收服務端。 server: 'webuploader.ashx?Method=Upload', // 選擇文件的按鈕。可選。 // 內部根據當前運行是創建,可能是input元素,也可能是flash. pick: '#picker', fileVal: "files", //指明參數名稱,后台也用這個參數接收文件 // 不壓縮image, 默認如果是jpeg,文件上傳前會壓縮一把再上傳! resize: false, auto :true }); //文件開始上傳之前出發 uploader.on('uploadStart', function (file) { uploader.option('server', 'webuploader.ashx?Method=Upload1'); }); // 文件上傳成功,給item添加成功class, 用樣式標記上傳成功。 uploader.on('uploadSuccess', function (file, response) { //上傳成功后 //$('#' + file.id).addClass('upload-state-done'); }); //開始上傳 $("#ctlBtn").click(function () { uploader.upload(); }); }); </script> </head> <body> <div id="uploader" class="wu-example"> <!--用來存放文件信息--> <div id="thelist" class="uploader-list"></div> <div class="btns"> <div id="picker">選擇文件</div> <button id="ctlBtn" class="btn btn-default">開始上傳</button> </div> </div> </body> </html>
后台接收:webuploader.ashx
<%@ WebHandler Language="C#" Class="webuploader" %> using System; using System.Web; using System.Reflection; public class webuploader : IHttpHandler { private HttpContext Context = HttpContext.Current; public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string method = context.Request["Method"].ToString(); MethodInfo methodInfo = this.GetType().GetMethod(method);//利用反射 獲取方法 string result = methodInfo.Invoke(this, null).ToString();//執行獲取到的方法 context.Response.Write(result); } public string Upload() { string strJson = ""; HttpPostedFile file = Context.Request.Files["files"];//接受上傳的文件 return strJson; } public string Upload1() { string strJson = ""; HttpPostedFile file = Context.Request.Files["files"];//接受上傳的文件 return strJson; } public bool IsReusable { get { return false; } } }