自己动手打造ajax图片上传

今天笔者需要一款图片上传插件，但是网上没有提供一款符合自己需求且好用的。于是就自己动手写了一个。

方法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,谷歌，兼容比方法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;
  }
 }
}

自己动手打造ajax图片上传,布布扣,bubuko.com