<!--引入Jquery-->
<script src="~/Script/jquery-1.8.2.min.js"></script>
<!--引入Css-->
<link href="~/CSS/webuploader.css" rel="stylesheet" />
<!--引入Js-->
<script src="~/Script/webuploader.js"></script>

<div id="fileList"></div> <!--這是存放圖片的容器-->
<div class="cp_img_jia" id="filePicker"></div> <!--這是上傳按鈕-->

<script type="text/javascript">

 var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
 $(function () {
 var $ = jQuery,
 $list = $('#fileList'),
 // 優(yōu)化retina, 在retina下這個值是2
 ratio = window.devicePixelRatio || 1,
 // 縮略圖大小
 thumbnailWidth = 90 * ratio,
 thumbnailHeight = 90 * ratio,
 // Web Uploader實例
 uploader;
 uploader = WebUploader.create({
 // 選完文件后，是否自動上傳。
 auto: false,

 // swf文件路徑
 swf: applicationPath + '/Script/Uploader.swf',

 // 文件接收服務(wù)端。
 server: applicationPath + '/Home/UpLoadProcess',

 // 選擇文件的按鈕。可選。
 // 內(nèi)部根據(jù)當(dāng)前運行是創(chuàng)建，可能是input元素，也可能是flash.
 pick: '#filePicker',

 //只允許選擇圖片
 accept: {
 title: 'Images',
 extensions: 'gif,jpg,jpeg,bmp,png',
 mimeTypes: 'image/*'
 }
 });
 
 // 當(dāng)有文件添加進來的時候
 uploader.on('fileQueued', function (file) {
 var $li = $(
 '<div id="' + file.id + '" class="cp_img">' +
 '<img>' +
 '<div class="cp_img_jian"></div></div>'
 ),
 $img = $li.find('img');


 // $list為容器jQuery實例
 $list.append($li);

 // 創(chuàng)建縮略圖
 // 如果為非圖片文件，可以不用調(diào)用此方法。
 // thumbnailWidth x thumbnailHeight 為 100 x 100
 uploader.makeThumb(file, function (error, src) {
 if (error) {
 $img.replaceWith('<span>不能預(yù)覽</span>');
 return;
 }

 $img.attr('src', src);
 }, thumbnailWidth, thumbnailHeight);
 });

 // 文件上傳過程中創(chuàng)建進度條實時顯示。
 uploader.on('uploadProgress', function (file, percentage) {
 var $li = $('#' + file.id),
 $percent = $li.find('.progress span');

 // 避免重復(fù)創(chuàng)建
 if (!$percent.length) {
 $percent = $('<p class="progress"><span></span></p>')
 .appendTo($li)
 .find('span');
 }

 $percent.css('width', percentage * 100 + '%');
 });

 // 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。
 uploader.on('uploadSuccess', function (file, response) {
 
 $('#' + file.id).addClass('upload-state-done');
 });

 // 文件上傳失敗，顯示上傳出錯。
 uploader.on('uploadError', function (file) {
 var $li = $('#' + file.id),
 $error = $li.find('div.error');

 // 避免重復(fù)創(chuàng)建
 if (!$error.length) {
 $error = $('<div class="error"></div>').appendTo($li);
 }

 $error.text('上傳失敗');
 });

 // 完成上傳完了，成功或者失敗，先刪除進度條。
 uploader.on('uploadComplete', function (file) {
 $('#' + file.id).find('.progress').remove();
 });

 //所有文件上傳完畢
 uploader.on("uploadFinished", function ()
 {
 //提交表單

 });

 //開始上傳
 $("#ctlBtn").click(function () {
 uploader.upload();

 });

 //顯示刪除按鈕
 $(".cp_img").live("mouseover", function ()
 {
 $(this).children(".cp_img_jian").css('display', 'block');

 });
 //隱藏刪除按鈕
 $(".cp_img").live("mouseout", function () {
 $(this).children(".cp_img_jian").css('display', 'none');

 });
 //執(zhí)行刪除方法
 $list.on("click", ".cp_img_jian", function ()
 {
 var Id = $(this).parent().attr("id");
 uploader.removeFile(uploader.getFile(Id,true));
 $(this).parent().remove();
 });
 
 });


</script>

public ActionResult UpLoadProcess(string id, string name, string type, string lastModifiedDate, int size, HttpPostedFileBase file)
 {
 string filePathName = string.Empty;

 string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, "Upload");
 if (Request.Files.Count == 0)
 {
 return Json(new { jsonrpc = 2.0, error = new { code = 102, message = "保存失敗" }, id = "id" });
 }

 string ex = Path.GetExtension(file.FileName);
 filePathName = Guid.NewGuid().ToString("N") + ex;
 if (!System.IO.Directory.Exists(localPath))
 {
 System.IO.Directory.CreateDirectory(localPath);
 }
 file.SaveAs(Path.Combine(localPath, filePathName));

 return Json(new
 {
 jsonrpc = "2.0",
 id = id,
 filePath = "/Upload/" + filePathName
 });
 
 }