html5以及jQuery实现本地图片上传前的预览代码实例讲解

41582021-03-04 17:26:16

这篇文章主要介绍了html5以及jQuery实现本地图片上传前的预览代码实例讲解，图文代码实例讲解的很清晰，有感兴趣的同学可以研究下

html5以及jQuery实现本地图片上传前的预览，效果类似如下：

选择图片前的页面：

选择图片之后的预览效果：

下面直接上代码（只是最简单的实现代码，css样式没有复制，自己随意发挥）

<!DOCTYPE html> 
<html> 
<head> 
    <title>HTML5上传图片预览</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script src="https://www.jb51.net/ajaxjs/jquery-1.6.2.min.js"></script> 
</head> 
<body> 
...
<form name="form0" id="form0" > 
    <!-- 这里特别说一下这个 multiple="multiple" 添加上这个之后可以一次选择多个文件进行上传，是 html5 的新属性--> 
    <input type="file" name="file0" id="file0" multiple="multiple" /><br><img src="" id="img0" > 
</form> 
...
<script> 
$("#file0").change(function(){ 
    // getObjectURL是自定义的函数，见下面 
    // this.files[0]代表的是选择的文件资源的第一个，因为上面写了 multiple="multiple" 就表示上传文件可能不止一个 
    // ，但是这里只读取第一个 
    var objUrl = getObjectURL(this.files[0]) ; 
    // 这句代码没什么作用，删掉也可以 
    // console.log("objUrl = "+objUrl) ; 
    if (objUrl) { 
        // 在这里修改图片的地址属性 
        $("#img0").attr("src", objUrl) ; 
    } 
}) ; 
//建立一個可存取到該file的url 
function getObjectURL(file) { 
    var url = null ; 
    // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已 
    if (window.createObjectURL!=undefined) { // basic 
        url = window.createObjectURL(file) ; 
    } else if (window.URL!=undefined) { // mozilla(firefox) 
        url = window.URL.createObjectURL(file) ; 
    } else if (window.webkitURL!=undefined) { // webkit or chrome 
        url = window.webkitURL.createObjectURL(file) ; 
    } 
    return url ; 
} 
</script> 
</body> 
</html>