在线html上传文件,html5实现表单内的上传文件框，建立一个可存取到该file的url。...

最新推荐文章于 2021-09-25 17:09:14 发布

转载最新推荐文章于 2021-09-25 17:09:14 发布 · 499 阅读

文章标签：

#在线html上传文件

本文介绍如何使用HTML5 File API实现在用户选择图片文件后进行预览的功能。通过创建一个可访问文件的URL，并将其设置为img标签的src属性来展示所选图片。

HTML5上传图片预览

请选择图片文件：JPG/GIF

//hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images，本例子主要是使用HTML5 的File API,建立一個可存取到该file的url，一个空的img标签，ID为img0,把选择的文件显示在img标签中，实现图片预览功能。请选择支持HTML API的浏览器，比如谷歌Chrome和火狐等。

$("#file0").change(function(){

var objUrl = getObjectURL(this.files[0]) ;

console.log("objUrl = "+objUrl) ;

if (objUrl) {

$("#img0").attr("src", objUrl) ;

}

}) ;

//建立一個可存取到該file的url

function getObjectURL(file) {

var url = null ;

if (window.createObjectURL!=undefined) { // basic

url = window.createObjectURL(file) ;