ajax上传文件

<input type="file" name="file" id = "input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" >
var formData = new FormData(); 
	//添加图片信息的参数
    formData.append('path', $('#input_file')[0].files[0]);  
	
    $.ajax({
        url: saveUrl + "uploadImg.ajax",
        type: 'POST',
		//上传文件不需要缓存
        cache: false, 
        data: formData,
		// 告诉jQuery不要去处理发送的数据
        processData: false, 
		// 告诉jQuery不要去设置Content-Type请求头
        contentType: false, 
		mimeType: "multipart/form-data",
		async:true,
        success: function (msg) {
			var data = JSON.parse(msg);
            if(data.errCode == "0000"){
				var saveImageUrl = data.saveImageUrl;
				var imageName = data.imageName;
				$("#saveImageUrl").val(saveImageUrl);
				$("#imageName").val(imageName);
				if("" != saveImageUrl){
					saveInfo();
				}else{
					popTips("图片上传失败!");
				}
			}else{
				saveInfo();
				popTips(data.errMsg);
			}
        },error: function (data) {
            popTips("上传异常!");
        }
    }) 

formData.append(‘path’, $(’#input_file’)[0].files[0]); 这一句很关键
前段代码:

// 这里使用display:none将input标签隐藏


点击按钮实现文件的上传,使用到formData对象,可以理解为HTML中的form表单的抽象; 使用创建一个formData对象,使用ajax进行异步提交数据;

js代码:

点击button按钮触发input标签

function select_file(){
$("#file").trigger(“click”);
}

function fileUpload(){
# 创建formdata对象
var formData = new FormData();
# 给formData对象添加标签,注意与input标签的ID一致
formData.append(‘file’, $(’#file’)[0].files[0]);
$.ajax({
url : ‘/xxx’,//这里写你的url
type : ‘POST’,
data : formData,
contentType: false,// 当有文件要上传时,此项是必须的,否则后台无法识别文件流的起始位置
processData: false,// 是否序列化data属性,默认true(注意:false时type必须是post)
dataType: ‘json’,//这里是返回类型,一般是json,text等
clearForm: true,//提交后是否清空表单数据
success: function(data) { //提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
aler(‘上传成功’);
},
error: function(data, status, e) { //提交失败自动执行的处理函数。
console.error(e);
}
});
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值