H5 + ajax 实现文件上传

利用H5的特效，file来实现文件上传

	<input id="toSelectImage" type="file" accept="image/*">

设置toSelectImage元素隐藏，点击上传按钮时，js触发该元素点击

$('#toSelectImage').click()

监听该元素的change事件

 $('#toSelectImage').change(function (e) {
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length) {
            return false;
        } else if (IMAGETYPE.indexOf(files[0].type.split('/')[1]) < 0) {
            layer.open({
                content: '请选择png/jpg/jpeg类型的图片',
                skin: 'msg',
                time: 2 //2秒后自动关闭tr54
            });
            return false;
        } else {
        	uploadImg()

        }
    });

如果选择的是图片就执行请求。

创建formData对象来支持异步上传文件

通过append向对象内添加元素

注意：

1. processData

jQuery的$.ajax()方法的时候参数processData默认为true

默认情况下会将发送的数据序列化以适应默认的内容类型application/x-www-form-urlencoded

如果想发送不想转换的的信息的时候需要手动将其设置为false

2. contentType

避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件

具体可以看这篇文章 https://blog.youkuaiyun.com/death05/article/details/80065742

  
    // 上传图片接口
    function uploadImg() {
    	var data = new FormData();
    	var file_data = $('#toSelectImage').prop("files")[0]; 
    	$("#toSelectImage").val("")
    	if(file_data.size > 1024 * 1024 * 15){
    		layer.msg('上传图片不得超过15M')
    		return false
    	}
    	data.append("file",file_data)
        $.ajax({
            url: 'img/imgUpload.do',
            type: 'post',
            dataType : "json",
            processData: false,  // 注意：让jQuery不要处理数据
            contentType: false,  // 注意：让jQuery不要设置contentType
            data: data,
            success: function (data) {

            }
        }）
    }