JS和jQuery实现文件上传、content-type值的理解

文件上传-----JS实现过程

利用了formData对象+XMLhttprequest实现。
-------**new formData();**创建formdata对象，该对象可以将数据编译为键值对，以便XMLhttprequest对象进行发送。
给formData追加数据，formdata. append(‘key’, value)
当是一个form表单元素时，可以将表单元素作为参数传递给formData构造函数即：new formData(form);如果只有一个input file类型的标签利用，空对象的append方法追加。
-------XMLhttpRequest：是一个浏览器接口，使用它可以用JavaScript进行http通信。用于前后台提交表单、以及上传二进制文件。是ajax技术的核心！！！ajax只能用于同源请求！！
open(请求方式post等、url、Boolean型是否异步)方法：url如果是跨域请求需要报错提示，Boolean默认是true表示异步请求；
send()方法：参数为要传递到后台的数据。当不传值时可以把参数设置为null。

<input type="file" id="file"/>
<input type="button" onclick="fileUpload" value="上传"/>

var file = document.getElementById('file');
var formobj=new formData();
//创建空对象，利用append方法，
    formobj.append('file', file);
//get方式
var xhr = new XMLHttpRequest();
    xhr.open('get','./xxx.html');//友好性可以提示url是否是同源。此时浏览器默认用application/x-www-form-urlencoded
    xhr.send(formobj);
//post方法
var xhr = new XMLHttpRequest();
    xhr.open('post','./xxx.html');//友好性可以提示url是否是同源。
    xhr.setRequestHeader('');//什么时候需要设置？在post提交时一定要设置
    xhr.send(formobj);

//ajax五步走，发送完请求后可以设置状态监听事件onreadystatechange()，如果状态改变可以做一些处理。
//或是要等待数据完整请求回来再处理，可以判断status和readyState的值
xhr.onreadystatechange = function() {
    if(xhr.readyState==4 && xhr.status==200) { //表明数据完整返回了
         console.log("请求完整返回");
         //此时返回的数据存在xhr.responseText里
    }
    //利用返回的数据更新HTML的内容即可。xhr.responseText
    console.log(xhr.responseText);
}

当表单里没有input type=file的标签时，可以使用application的编码方式；
xhr.setRequestHeader ( ‘content-type’, ‘application/x-www-form-urlencoded’);

注意;
当有type=file标签时一定要用multiple/form-data的方式表明提交文件；并且使用表单提交文件，一定要在< form>里设置enctyped="multiple/form-data"
或者：
xhr.setRequestHeader ( ‘content-type’, ‘multiple/form-data’);
【ps：不知道是否正确，找了资料没有满意的，有懂的盆友可以留言指正】

jquery实现ajax请求

content-type:false 原因—在form表单已经设置了enctyped值请求头中就已经有对应的属性值了，此处的false表明jQuery不要对数据进行处理

$.ajax({
        url:'uploadDo.php',
        type: 'POST',
        data: formData,
        //这两个设置项必填
        contentType: false,  //在form表单已经设置了enctyped值请求头中就已经有对应的属性值了，此处的false表明jQuery不要对数据进行处理
        processData: false,   //表明不要对数据进行处理
        success:function(data){
        var srcPath = data;
        　　　　 //注意这里的路径要根据自己的储存文件的路径设置
        $('.picDis img').attr('src', srcPath);
        }

写的不错的资料：https://www.cnblogs.com/smyhvae/p/8523576.html
https://blog.youkuaiyun.com/evilcry2012/article/details/79463775