jQuery ajax 文件上传

2016-11-25 08:12:23来源:CSDN作者:u013314786人点击

第七城市

       之前用的ajaxfileupload,但是感觉不太好用,今天前端文件上传出了点问题,索性午休时自己扩展了一个简单的 jQuery ajax上传文件插件,需要用到上传功能的页面,只需在jQuery引入后,引入该js文件即可。由于使用了FormData,低版本IE不一定支持,我们是后台管理系统,都用的chrome,firefox和360等国产chrome内核的浏览器,所以不用考虑这个问题。

粘上代码以记之:fileUpload.js

/** * jQuery上传文件扩展插件 * 使用方法示例(方括号中为可选参数): * $.fileUpload({ * 						url: ...,  // 文件上传地址 * 						file: "#uploadFile", 	// css选择器指定的待上传文件标签 * 						[fileName:...], 	// 上传至服务器的文件名 * 						[data:{id:1,user:"小明"}],  // 自定义一起上传的参数 * 						[success: function(data){console.log(data)}]  // 上传成功后的回调函数 * 					   }); *  * 注意:本插件IE9及以下不支持 *  * author: lixk * date: 2016/11/24  */var fileUpload = function(params){	var file = $(params["file"]).get(0) || {}; //文件对象	var fileName = params["fileName"] || file.name;  //上传至服务器的文件名,默认file的name	var fileContent = file.files[0] || {}; //文件内容	var url = params["url"];  //上传地址	var data = params["data"] || {}; //自定义参数	var success = params["success"]; //上传成功的回调函数	var formData = new FormData(); //创建上传表单	formData.append(fileName, fileContent);	//向表单添加参数	for(var key in data) {		formData.append(key, data[key]);	}	//向服务器发送表单数据	$.ajax({		url: url,		type: "POST",		data: formData,		processData: false,  // 告诉jQuery不要去处理发送的数据		contentType: false,   // 告诉jQuery不要去设置Content-Type请求头		success: function(data) { //请求成功,回调		  if(success){			  success(data);		  }		}	});}//添加jQuery扩展jQuery.extend({fileUpload: fileUpload});

图片上传使用示例:

$.fileUpload({	url: uploadLogo_url,	file: 'input[name="logoFile"]', 	//fileName:"logoFile",	success: function(data){		$("#logoImg").attr("src", data.imgPath); // 预览图片	}});




第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台