自己動手打造ajax圖片上傳

標籤：style   blog   http   java   color   使用   

今天筆者需要一款圖片上傳外掛程式，但是網上沒有提供一款符合自己需求且好用的。於是就自己動手寫了一個。

方法1，僅使用jquery代碼，不用第三方外掛程式。代碼如下

<p>   <label>上傳圖片</label>   <input class="ke-input-text" type="text" id="url" value="" readonly="readonly" />   <input type="button" id="uploadButton" value="Upload" />   </p>   <script type="text/javascript">    $(function() {     $('.inp_fileToUpload').change(function() {      var formdata = new FormData();      var v_this = $(this);      var fileObj = v_this.get(0).files;      url = "/upload/upload_json.ashx";      //var fileObj=document.getElementById("fileToUpload").files;      formdata.append("imgFile", fileObj[0]);      jQuery.ajax({       url : url,       type : 'post',       data : formdata,       cache : false,       contentType : false,       processData : false,       dataType : "json",       success : function(data) {        if (data.error == 0) {         v_this.parent().children(".img_upload").attr("src", data.url);         //$("#img").attr("src",data.url);        }       }      });      return false;     });    });   </script>

這種方法的缺點：由於IE6\8\9\不支援formdata，所以這種方法不支援IE9及以下版本

方法二：使用ajaxfileupload.js外掛程式html代碼：

 <p>    <label>ajax上傳</label>    <input type="file" name="fileToUpload" id="fileToUpload" class="inp_fileToUpload" multiple="multiple"/>    <img src="$web.site$web.tpl#**#adminht/images/lb_head.jpg" width="30px" height="30px" class="img_upload" id="img" />   </p>   <p>    <label>最新修改人員：</label>    <input readonly="readonly" type="text" size="30" />   </p>   <div>       <script type="text/javascript">     $(function() {      $(".inp_fileToUpload").live("change", function() {//現在這個已經適用於多個file表單。       ajaxFileUpload($(this).attr("id"), $(this).parent().children(".img_upload").attr("id"));      })     })     function ajaxFileUpload(file_id, img_id) {      jQuery.ajaxFileUpload({       url : '/upload/upload_json.ashx', //用於檔案上傳的伺服器端請求地址       secureuri : false, //是否需要安全性通訊協定，一般設定為false       fileElementId : file_id, //檔案上傳域的ID       dataType : 'json', //傳回值類型 一般設定為json       success : function(data, status)//伺服器成功響應處理函數       {        if (data.error == 0) {         $("#" + img_id).attr("src", data.url);        } else {         alert(data.message);        }       },       error : function(data, status, e)//伺服器響應失敗處理函數       {        alert(e);       }      })      return false;     }    </script>   </div>  </div>

說明：這種方法目前測試支援IE8/9,Google，相容比方法1好。建議採用方法2
檔案上傳幕後處理代碼（asp.net版）

<%@ webhandler Language="C#" class="Upload" %>using System;using System.Collections;using System.Web;using System.IO;using System.Globalization;using LitJson;public class Upload : IHttpHandler{ private HttpContext context; public void ProcessRequest(HttpContext context) {  String aspxUrl = context.Request.Path.Substring(0, context.Request.Path.LastIndexOf("/") + 1);   //檔案儲存目錄路徑  String savePath = "attached/";  //檔案儲存目錄URL  String saveUrl = aspxUrl + "attached/";  //定義允許上傳的副檔名  Hashtable extTable = new Hashtable();  extTable.Add("image", "gif,jpg,jpeg,png,bmp");  extTable.Add("flash", "swf,flv");  extTable.Add("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");  extTable.Add("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");  //最大檔案大小  int maxSize = 1000000;  this.context = context;  HttpPostedFile imgFile = context.Request.Files["imgFile"];  if (imgFile == null)  {   showError("請選擇檔案。");  }  String dirPath = context.Server.MapPath(savePath);  if (!Directory.Exists(dirPath))  {   showError("上傳目錄不存在。");  }  String dirName = context.Request.QueryString["dir"];  if (String.IsNullOrEmpty(dirName)) {   dirName = "image";  }  if (!extTable.ContainsKey(dirName)) {   showError("目錄名不正確。");  }  String fileName = imgFile.FileName;  String fileExt = Path.GetExtension(fileName).ToLower();  if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize)  {   showError("上傳檔案大小超過限制。");  }  if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(((String)extTable[dirName]).Split(','), fileExt.Substring(1).ToLower()) == -1)  {   showError("上傳副檔名是不允許的副檔名。\n只允許" + ((String)extTable[dirName]) + "格式。");  }  //建立檔案夾  dirPath += dirName + "/";  saveUrl += dirName + "/";  if (!Directory.Exists(dirPath)) {   Directory.CreateDirectory(dirPath);  }  String ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo);  dirPath += ymd + "/";  saveUrl += ymd + "/";  if (!Directory.Exists(dirPath)) {   Directory.CreateDirectory(dirPath);  }  String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;  String filePath = dirPath + newFileName;  imgFile.SaveAs(filePath);  String fileUrl = saveUrl + newFileName;  Hashtable hash = new Hashtable();  hash["error"] = 0;  hash["url"] = fileUrl;  context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");  context.Response.Write(JsonMapper.ToJson(hash));  context.Response.End(); } private void showError(string message) {  Hashtable hash = new Hashtable();  hash["error"] = 1;  hash["message"] = message;  context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");  context.Response.Write(JsonMapper.ToJson(hash));  context.Response.End(); } public bool IsReusable {  get  {   return true;  } }}