无刷新上传预览图片-formData

无刷新上传

手写无刷新上传要用到两个东西,FormData和FileReader。
FileReader 用于图片浏览。

FormData 用于ajax请求。

html代码

先创建表单跟图片的容器

    <form enctype="multipart/form-data" id="oForm">
        <input type="file" name="file" id="file" onchange="readAsDataURL()" />
        <input type="button" value="提交" onclick="doUpload()" />
    </form>
    <div>
        <img alt="" id="img"/>
    </div>

javascript代码

FormData:
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,
因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输
的数据格式和表单通过submit() 方法传输的数据格式相同。

在这里FormData对象是用来获取form表单内的所有input数据,然后使用ajax请求发送数据到指定url,
就不会出现表单提交时跳转的情况。

    function doUpload() {  
         var formData = new FormData($( "#oForm" )[0]);  
         console.log(formData); 
         $.ajax({  
              url: 'pp',  
              type: 'POST',  
              data: formData,  
              async: false,  
              cache: false,  
              contentType: false,  
              processData: false,  
              success: function (returndata) {  
                  console.log(returndata);  
              },  
              error: function (returndata) {  
                  console.log(returndata);  
              }  
         });  
    } 

FileReader:
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,
使用 File 或 Blob 对象指定要读取的文件或数据。

在这里FileReader对象是用来获取file上来的图片并把图片转换成Data URL形式显示在事先创建的
容器中。

    function readAsDataURL(){
    //检验是否为图像文件
        var file = document.getElementById("file").files[0];
        if(!/image\/\w+/.test(file.type)){
            alert("看清楚,这个需要图片!");

            return false;
        }else{
        var reader = new FileReader();
        //将文件以Data URL形式读入页面
        reader.readAsDataURL(file);
        reader.onload=function(e){
            var result=document.getElementById("img");
            //显示文件
            result.src= this.result ;
        }
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值