標籤：index json pru 情況 sts string 上傳圖片 max nbsp
1、Uploadify簡介
Uploadify是基於jQuery的一種上傳外掛程式，支援多檔案、帶進度條顯示上傳，在項目開發中常被使用。
Uploadify官方網址：http://www.uploadify.com/
2、ASP.NET MVC3中的使用Uploadify
搭建ASP.NET MVC3解決方案如，其中使用到的Uploadify為3.1版本：
1>、簡單樣本
_Layout.cshtml代碼：
<!DOCTYPE html><html><head> <title>@ViewBag.Title</title> @RenderSection("Header")</head><body> @RenderBody()</body></html>
Index.cshtml代碼：
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml";}@section Header{ <link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(‘#file_upload‘).uploadify({ ‘swf‘ : ‘@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")‘, ‘uploader‘ : ‘/Home/Upload‘ }); }); </script> <style type="text/css"> body { font-size: 12px; } .tip { height: 20px; border-bottom: 1px solid #CCC; margin-bottom: 10px; } </style>}<div class="tip"> jQuey Uploadify上傳檔案樣本：</div><input type="file" id="file_upload" name="file_upload" />
HomeController.cs代碼:
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using System.IO;namespace WebUI.Controllers{ public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } [AcceptVerbs(HttpVerbs.Post)] public JsonResult Upload(HttpPostedFileBase fileData) { if (fileData != null) { try { // 檔案上傳後的儲存路徑 string filePath = Server.MapPath("~/Uploads/"); if (!Directory.Exists(filePath)) { Directory.CreateDirectory(filePath); } string fileName = Path.GetFileName(fileData.FileName);// 原始檔案名稱 string fileExtension = Path.GetExtension(fileName); // 副檔名 string saveName = Guid.NewGuid().ToString() + fileExtension; // 儲存檔案名稱 fileData.SaveAs(filePath + saveName); return Json(new { Success = true, FileName = fileName, SaveName = saveName }); } catch (Exception ex) { return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet); } } else { return Json(new { Success = false, Message = "請選擇要上傳的檔案！" }, JsonRequestBehavior.AllowGet); } } }}
上傳：
2>、設定上傳圖片大小
ASP.NET MVC預設情況下，允許上傳的檔案大小最大為4MB。因此在預設情況下，Uploadify也只能最大上傳4MB大小的檔案，超過範圍則會IO報錯提示無法上傳。
修改Web.config設定允許上傳的最大檔案大小：
<system.web> <!--設定最大允許上傳檔案大小1G--> <httpRuntime maxRequestLength= "102400" executionTimeout= "60" /></system.web>
修改最大上傳檔案大小後效果：
3>、Uploadify常用屬性設定
auto：是否選擇檔案後自動上傳，預設為true。
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml";}@section Header{ <link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(‘#file_upload‘).uploadify({ ‘auto‘ : false, ‘swf‘ : ‘@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")‘, ‘uploader‘ : ‘/Home/Upload‘ }); }); </script> <style type="text/css"> body { font-size: 12px; } .tip { height: 20px; border-bottom: 1px solid #CCC; margin-bottom: 10px; } </style>}<div class="tip"> jQuey Uploadify上傳檔案樣本：</div><div> <input type="file" id="file_upload" name="file_upload" /></div><div> <a href="javascript:$(‘#file_upload‘).uploadify(‘upload‘);">上傳</a></div>
buttonText：設定上傳按鈕顯示文字。
<script type="text/javascript"> $(function () { $(‘#file_upload‘).uploadify({ ‘buttonText‘ : ‘請選擇上傳檔案‘, ‘swf‘ : ‘@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")‘, ‘uploader‘ : ‘/Home/Upload‘ }); });</script>
buttonImage：設定上傳按鈕背景圖片。
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml";}@section Header{ <link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(‘#file_upload‘).uploadify({ ‘buttonImage‘: ‘@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")‘, ‘swf‘: ‘@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")‘, ‘uploader‘: ‘/Home/Upload‘ }); }); </script> <style type="text/css"> body { font-size: 12px; } .tip { height: 20px; border-bottom: 1px solid #CCC; margin-bottom: 10px; } .uploadify-button { background-color: transparent; border: none; padding: 0; } .uploadify:hover .uploadify-button { background-color: transparent; } </style>}<div class="tip"> jQuey Uploadify上傳檔案樣本：</div><div> <input type="file" id="file_upload" name="file_upload" /></div>
multi：是否允許一次選擇多個檔案一起上傳，預設為true。
<script type="text/javascript"> $(function () { $(‘#file_upload‘).uploadify({ ‘buttonImage‘: ‘@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")‘, multi: true, ‘swf‘: ‘@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")‘, ‘uploader‘: ‘/Home/Upload‘ }); });</script>
fileTypeDesc：設定允許上傳圖片格式描述；
fileTypeExts：設定允許上傳圖片格式。
<script type="text/javascript"> $(function () { $(‘#file_upload‘).uploadify({ ‘buttonImage‘: ‘@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")‘, ‘fileTypeDesc‘: ‘圖片檔案‘, ‘fileTypeExts‘: ‘*.gif; *.jpg; *.png‘, ‘swf‘: ‘@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")‘, ‘uploader‘: ‘/Home/Upload‘ }); });</script>
removeCompleted：設定已完成上傳的檔案是否從隊列中移除，預設為true。
$(function() { $("#file_upload").uploadify({ ‘removeCompleted‘ : false, ‘swf‘ : ‘/uploadify/uploadify.swf‘, ‘uploader‘ : ‘/uploadify/uploadify.php‘ });});
queueSizeLimit：設定上傳隊列中同時允許的上傳檔案數量，預設為999。
$(function() { $("#file_upload").uploadify({ ‘queueSizeLimit‘ : 1, ‘swf‘ : ‘/uploadify/uploadify.swf‘, ‘uploader‘ : ‘/uploadify/uploadify.php‘ });});
uploadLimit：設定允許上傳的檔案數量，預設為999。
$(function() { $("#file_upload").uploadify({ ‘swf‘ : ‘/uploadify/uploadify.swf‘, ‘uploader‘ : ‘/uploadify/uploadify.php‘, ‘uploadLimit‘ : 1 });});
4>、Uploadify常用事件設定
onUploadComplete:單個檔案上傳完成時觸發事件。
$(function() { $("#file_upload").uploadify({ ‘swf‘ : ‘/uploadify/uploadify.swf‘, ‘uploader‘ : ‘/uploadify/uploadify.php‘, ‘onUploadComplete‘ : function(file) { alert(‘The file ‘ + file.name + ‘ finished processing.‘); } });});
onQueueComplete：隊列中全部檔案上傳完成時觸發事件。
$(function() { $("#file_upload").uploadify({ ‘swf‘ : ‘/uploadify/uploadify.swf‘, ‘uploader‘ : ‘/uploadify/uploadify.php‘, ‘onQueueComplete‘ : function(queueData) { alert(queueData.uploadsSuccessful + ‘ files were successfully uploaded.‘); } });});
onUploadSuccess：單個檔案上傳成功後觸發事件。
<script type="text/javascript"> $(function () { $(‘#file_upload‘).uploadify({ ‘buttonImage‘: ‘@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")‘, ‘swf‘: ‘@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")‘, ‘uploader‘: ‘/Home/Upload‘, ‘onUploadSuccess‘: function (file, data, response) { eval("data=" + data); alert(‘檔案 ‘ + file.name + ‘ 已經上傳成功，並返回 ‘ + response + ‘ 儲存檔案名稱為 ‘ + data.SaveName); } }); });</script>
4>、Uploadify常用方法
upload：上傳檔案
cancel：取消上傳
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml";}@section Header{ <link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(‘#file_upload‘).uploadify({ ‘auto‘ : false, ‘buttonImage‘ : ‘@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")‘, ‘swf‘ : ‘@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")‘, ‘uploader‘ : ‘/Home/Upload‘ }); }); </script> <style type="text/css"> body { font-size: 12px; } .tip { height: 20px; border-bottom: 1px solid #CCC; margin-bottom: 10px; } .uploadify-button { background-color: transparent; border: none; padding: 0; } .uploadify:hover .uploadify-button { background-color: transparent; } </style>}<div class="tip"> jQuey Uploadify上傳檔案樣本：</div><div> <input type="file" id="file_upload" name="file_upload" /></div><div> <a href="javascript:$(‘#file_upload‘).uploadify(‘upload‘);">上傳第一個</a> <a href="javascript:$(‘#file_upload‘).uploadify(‘upload‘,‘*‘);">上傳隊列</a> <a href="javascript:$(‘#file_upload‘).uploadify(‘cancel‘);">取消第一個</a> <a href="javascript:$(‘#file_upload‘).uploadify(‘cancel‘, ‘*‘);">取消隊列</a></div>
3、範例程式碼附件
jQueryUploadifyDemo.rar
jQuery Uploadify在ASP.NET MVC3中的使用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
