关于图片，文件上传的总结-CFANZ编程社区

在文件上传中，一般都会用到一个formData对象，

通过formData对象可以组装一组用XMLHttpRequest发送请求的键值对。这个效果和 form表单提交时，将编码类型设置为multipart/form-data的方式一样，会直接取name为键值对名，value为值，传送给服务器。

$('input).change(function(e){
            var formData = new FormData();
            formData.append('name','GT')；
　　　　　　　formData.append('fileName',this.files[0])//取文件的时候 注意是 this $(this)
            fileUpload(formData,this)

})
//利用ajax上传
 function fileUpload(data,obj){
        $.ajax({
            type:'post',
            url:basePath+'/fileUpload',
            data:data,
            async : false,
            cache : false,//上传文件无需缓存
            contentType : false,//传输的数据类型，必须为这个 或者是mutipart/form-data 当表单已经设置好 这里必须为false
            processData : false,//用于对data参数进行序列化处理 这里必须false
            success:function(data){
                myimg=data.result;//线上图片地址 这个地址 后台要做映射
                $(obj).parents('tr').addClass('on').find('.img_').html(data.result)
                $('.mask').show();
            }
            ,error:function (data) {
                alert('服务器走丢了')
            }
        })
    }

　　formData是通过append('名'，‘值’)来进行添加的

另一种上传的方式

var xhr = new XMLHttpRequest();
  xhr.open("POST", "stash.php", true);
  xhr.onload = function(oEvent) {
    if (oReq.status == 200) {
     //上传成功
    } else {
     //上传失败
    }
  };

  oReq.send(formData);

　　也可以直接用表单

<form action="/url.do" enctype="multipart/form-data" method="post">
     <input type="file" name="name"/>
     <input type="hidden" name="pwd"/> //额外参数 可以不显示出来
     <input type="hidden" name="mytype"/>
     <input type="submit" value="提交">
   </form>

　最近一些框架也有自己的方式，eg layui上传文件

upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
    layer.load(); //上传loading
  }
  ,done: function(res, index, upload){
    layer.closeAll('loading'); //关闭loading
  }
  ,error: function(index, upload){
    layer.closeAll('loading'); //关闭loading
  }
});

（但是注意的是这里的xhr 是取不到的所以不能利用 xhr.setRequestHeader("appId", "xxx")附带请求头参数）跨域的话只能服务端进行Access-Control-Allow-Origin 这里有完整文档介绍

这里主要说一下添加参数的问题

写一个添加额外参数的函数：

function addData(input,data){
    var item=[];
    $.each(data,function(k,v){
        item.push('<input type="hidden" name="'+k+'" value="'+v+'">');
    })
    $(input).after(item.join(''));
}

然后在上传的 before中调用这样就可以在文件上传时候添加额外字段了

before:function (input) {
    var data={
        "appId":"xxxx",
        "name":"GT"
    }
    addData(input,data)
}

input 的三个属性accept、capture、multiple

1. accept 可接受的文件类型 accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。

　　属性值：*代表所有 audio的类型还可以加具体类型(image/gif, image/jpeg,....)

　　　　　　audio/*

　　　　　　video/*

　　　　　　image/*

有个博客总结了关于 accrpt的类型对谷歌和ff有效的一些特殊写法戳这里

2、capture属性
　　捕获到系统默认的设备，camera–照相机，camcorder–摄像机，microphone–录音（我试验了一下无法掉起移动端的相机但可以吊起 pc端的摄像头）

3.multiple属性如果使用该属性，则允许一个以上的值是html5的新属性

　　multiple="multiple"  则字段可接受多个值