H5 ajax formData上传文件、图片、表单信息 、图片显示

H5 ajax formData上传文件、图片、表单信息 、图片显示

部分安卓微信浏览器无法触发change事件
所以移动端上传图片一定要加 accept=“image/*;”

<form id="formData">
	<input type="text" name="uname" id="uname" />
	<input type="file" name="files" id="files"  accept="image/*;" />
	<img id="showimg" src="" alt="">
</form>	
<div class="but">
    <button>提交</button>
</div>

看了很多博客，博主们都不加 dataType:“jsonp” ，我这里加是因为服务器返回的jsonp 不写这个控制台不展示数据

	$(function(){
		$('.but>button').click(function(){
			data_info()
		})
		let file= document.querySelector('#files')
	    file.addEventListener('change', function (e) {
	        show_img(file.files[0])
	    })
	})
	
	//提交数据
    function data_info(){
        let formData = new FormData();
            formData.append('uname', $('#uname').val());
            formData.append('files', $('#files')[0].files[0]);
			//ajax_url 是我服务器地址url
            $.ajax({
                url: ajax_url
                type: "POST",
                data: formData,  
                dataType:"jsonp", 
                cache: false, //设置为 false 将不缓存此页面
                contentType: false,//发送信息至服务器时内容编码类型
                processData: false,//默认会把data的数据转为字符串
                success: function(data){
                    console.log(data);
                  },
                error: function(data){
                   alert("网络错误 请稍后再试！")
                }
            });
    }
    
   	//图片显示
	function show_img(file) {
        // 支持不支持FileReader
        if (!file || !window.FileReader) return
        if (/^image/.test(file.type)) {
            // 创建一个reader
            var reader = new FileReader()
            // 将图片将转成 base64 格式,并保存在reader中
            reader.readAsDataURL(file)
            // 读取成功后的回调
            reader.onload = function (oFREvent) {
                var base64Url = oFREvent.target.result
                let img = document.querySelector('#showimg')
                img.src = oFREvent.target.result
                $('#showimg').show();
            }
        }else{
            alert('文件不是图片')
        }
    }