自己动手打造ajax图片上传的方法教程

这篇文章主要介绍“自己动手打造ajax图片上传的方法教程”,在日常操作中,相信很多人在自己动手打造ajax图片上传的方法教程问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”自己动手打造ajax图片上传的方法教程”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

目前创新互联已为数千家的企业提供了网站建设、域名、网络空间、网站托管、服务器租用、企业网站设计、汤原网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

方法1,仅使用jquery代码,不用第三方插件。代码如下

       

    $(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;  });  }); 

这种方法的缺点:由于IE6\8\9\不支持formdata,所以这种方法不支持IE9及以下版本

方法二:使用ajaxfileupload.js插件
ajaxfileupload.js
html代码:

       

 

     

 
    $(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;  }   
 


说明:这种方法目前测试支持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图片上传的方法教程”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


本文题目:自己动手打造ajax图片上传的方法教程
文章URL:http://myzitong.com/article/gessdd.html

其他资讯