您的位置 首页 javascript教程

js简单上传图片预览功能的实例详解

js简单上传图片预览功能-简单粗暴

js简单上传图片预览功能

<!DOCTYPE html><html><head><title>js简单上传图片预览功能</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script></head><body><h3>请选择图片文件:JPG/GIF</h3><form name="form0" id="form0" >    <input type="file" name="file0" id="file0" multiple="multiple" />    <br>    <img src="" id="img0" width="150" height="150" style="display:none;"></form></body></html> <script type="text/javascript">$("#file0").change(function(){    var objUrl = getObjectURL(this.files[0]) ;    console.log("objUrl = "+objUrl) ;    if (objUrl) {        $("#img0").attr("src", objUrl) ;        $("#img0").show();    }}) ;//建立一個可存取到該file的urlfunction getObjectURL(file) {    var url = null ;    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>

推荐教程:《JS基础教程》

以上就是js简单上传图片预览功能的实例详解的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:js简单上传图片预览功能的实例详解

文章地址:https://www.pyhw.net/31249_js%e7%ae%80%e5%8d%95%e4%b8%8a%e4%bc%a0%e5%9b%be%e7%89%87%e9%a2%84%e8%a7%88%e5%8a%9f%e8%83%bd%e7%9a%84%e5%ae%9e%e4%be%8b%e8%af%a6%e8%a7%a3.html

关于作者: admin

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图