input file上传图片后预览：

  2. //对file上传的图片做处理
  3. function getObjectURL(file) {
  4.   var url = null ;
  5.   // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
  6.   if (window.createObjectURL!=undefined) { // basic
  7.   url = window.createObjectURL(file) ;
  8.   } else if (window.URL!=undefined) { // mozilla(firefox)
  9.   url = window.URL.createObjectURL(file) ;
  10.   } else if (window.webkitURL!=undefined) { // webkit or chrome
  11.   url = window.webkitURL.createObjectURL(file) ;
  12.   }
  13.   return url ;
  14. };
  16. //////////////////////////////////////////////////////////////
  18. $("#files").change( function(e){
  19.   var f=document.getElementById('files').files[0];
  20.   var newsrc=getObjectURL(f);
  21.   $('#expertImg').attr('src',newsrc);
  22. })

formData下数据，方便file的文件请求ajax;

  1. form.on('submit(editExpert)', function(data) {
  2.   var formData = new FormData();
  3.   formData.append("TOKEN",token);
  4.   formData.append("EXPERTNAME",data.field.expertName);
  5.   formData.append("ID",data.field.id);
  6.   formData.append("TYPE",data.field.type);
  7.   formData.append("INTRODUCE",data.field.introDuce);
  8.   formData.append("FANSNUM",data.field.fansNum);
  9.   formData.append("HITRATE",data.field.hitrate);
  10.   formData.append("PROFITRATE",data.field.profitrate);
  12.   var fileInput = document.querySelector('#files');                        
  13.   var files = fileInput.files;
  14.   if(files.length > 0){
  15.   [].slice.call(files).forEach(function(value,index){
  16.   formData.append('file',value,value.name); //遍历添加上传的图片的数据
  17.   })
  18.   }
  19.   getEditExpert(formData);
  20.   return false;
  21. })
  23. function getEditExpertMsg(form_data) {
  24.   $.ajax({
  25.     url: apqurl + '/expert/updateExpert',
  26.     type: 'post',
  27.     data:form_data,
  28.     contextType: 'multipart/form-data; charset=utf-8',
  29.     async: false,
  30.     processData:false,  //jQuery不要去处理发送的数据
  31.     contentType:false,  //jQuery不要去设置Content-Type请求头
  32.     success: function(res) {
  33.       console.log(res);
  34.       if(res.code == 0) {
  35.         layer.msg(res.msg, {
  36.         icon: 1
  37.         });
  38.       }else {
  39.         layer.msg(res.msg, {
  40.         icon: 2
  41.            });
  42.       }
  43.     }
  44.   })
  45. }

image.png

image.png

jQuery_ajax报错：Uncaught TypeError: Illegal invocation

image.png
报错的解决办法：设置processData与contentType参数为false

  1. $.ajax({
  2.     url: apqurl + '/expert/updateExpert',
  3.     type: 'post',
  4.     data:form_data,
  5.     contextType: 'multipart/form-data; charset=utf-8',
  6.     async: false,
  7.     processData:false, // jQuery不要去处理发送的数据
  8.     contentType:false, // jQuery不要去设置Content-Type请求头
  9.     success:function(data){},
  10.     error:function(err){}
  11.    })

注意：

查看formData对象数据需要用get(‘名字’)或者getAll()方法**，直接打印出来是{}的
form表单提交对于file文件类型的input框并不适用
file文件只能上传不能赋值或预览图片
更改input file 的按钮样式可参考如下标签写法（file类型的标签隐藏，其它标签代替）：
image.png**

以上参考：https://www.cnblogs.com/shapeY/p/7903414.html