解决问题：如何用ajax上传图片文件

1：先说我们平时接触到的接口都是后台需要你给他传递几个参数，你就把参数对应的值 给他们就行了


上面的这个截图就是我们最常用的接口形式；

2.当你给后台传图片时，你传的是一个文件 而不再是普通的string类型的值。而是file类型 也就是文件类型

我这里说的是用ajax实现的图片上传

1.在ajax中加上processData : false,
2.在ajax中加上contentType : false,
3.在ajax中加上async:false,

4.主要是改变ajax中的data这个属性：看代码

//js代码
	<script type="text/javascript">
		function upload1() {
			$('#thumb').click();
			// $("#thumb").unbind().change() 防止change事件多次调用接口
            $("#thumb").unbind().change( function() {

                console.log( $("#thumb").val())   //虚拟路径C:\fakepath\upload.png
                //console.log( $("#thumb").files[0])
				var formData =new FormData();   //新建表单元素
                formData.append('file',$('#thumb')[0].files[0]);   //添加上传文件变量，获得文件真实信息，解决虚拟路径
                console.log( document.getElementById("thumb").files[0])
                $.ajax({
                    type:'POST',
                    url:'{:url("Upload/Upload12")}',
                    data:formData,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
					async:false,
                    success:function(res){

                        if(res.code == 2) {
                            $('#img1').attr('src',res.src)
                            $('#imgbox1').css('display','inline-block');
                            $('#add1').css('display','none');
                            $('#imgbox1').append('<input type="hidden" name="thumb" value="'+ res.id +'">');
                            alert("上传成功！");
                            $("#thumb").val(''); //清空文件输入框里的数据，解决选择相同文件名文件change不起作用
                        } else {
                            alert("上传失败！");
                        }
                    }
                })

                //return false
            });
        }

针对于change事件上传文件调用多次接口问题
在每次调用change事件之前先解绑在加事件即可

unbind() 解绑

$(that).children('input').unbind().change(function () {})

解决选择相同文件名文件change不起作用

在change事件中的最后将本次的value置空。

  uploadChange() {
    let files = this.$refs["upload"].files[0];
    this.flieData = files
    ...
    if (!validImage(files, 2)) {
      // 防止第二次传同图片，不触发uploadChange,将上传文件里的值清空
      this.$refs["upload"].value = ''
      return
    }
  }

更多推荐

通过ajax单独上传图片