JavaScript预览图片功能实现无刷新上传

本文要用到两个东西，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>
  <p>
    <img alt="" id="img"/>
  </p>

javascript代码

FormData:

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。如果表单的编码类型设置为multipart/form-data ，则通过FormData传输 的数据格式和表单通过submit() 方法传输的数据格式相同。

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

FileReader:

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

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

以上就是JavaScript 预览图片功能 实现无刷新上传的详细内容，更多请关注Gxl网其它相关文章！