图片上传及预览

html代码

<div class="form-group">
        <label>选择图片：</label>
        <div>
            <input type="file" class="inp" id="inp">
        </div>
        <img  id="imgUpload" src="" alt="" />
    </div>

new FromData()

   $('#inp').on('change',function(){
        // 如果没有选择图片 直接退出
        if(this.files.length <=0){
            return false;
        }
        
        // 图片上传到服务器
        var pic1 = this.files[0];
        var formData = new FormData();
        console.log(this.files)
        //图片显示
        var reads = new FileReader();
        reads.readAsDataURL(pic1)
        reads.onload=function(e){
            $('#imgUpload').attr('src',e.target.result)
        }
        
        // 服务端要求参数是 pic1 
        formData.append('fileb',pic1);
        formData.append('num',5);
        $.ajax({
            url:'http://192.168.0.102:8000/create_file',
            type:'post',
            dataType:'json',
            data:formData,
            cache: false, //上传文件不需要缓存
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success:function(data){
                console.log(data);
            }
        })
    })