基于JavaScript FileReader上传图片显示本地链接
更新时间：2016年05月27日 11:38:59 作者：小时光
这篇文章主要为大家详细介绍了基于JavaScript FileReader上传图片显示本地链接的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
简介
使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个<input type="text" />元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果.
页面中多个，上传多个图片DEMO代码
<!Doctype html>
<html>
<head>
<title>上传图片显示预览图</title>
<style>
#result img{
height:100px;
display:inline-block;
margin-right:10px;
margin-bottom:10px;
}
</style>
</head>
<body>
<div class="add_imgs">
<p>
<label>请选择一个图像文件：</label>
<input type="file" id="file_input" style="display:none;" />
</p>
<div id="result">
<a href="javascript:void(0);" class="add_img_btn">添加图片</a>
</div>
</div>
<div class="add_imgs">
<p>
<label>请选择一个图像文件：</label>
<input type="file" id="file_input" style="display:none;" />
</p>
<div id="result">
<a href="javascript:void(0);" class="add_img_btn">添加图片</a>
</div>
</div>
<script src="jquery-2.2.1.min.js"></script>
<script>
$(".add_img_btn").unbind("click").on("click",function(){
$(this).parents(".add_imgs").find("input[type=file]").click();
var result = $(this).parent();
var input = $(this).parents(".add_imgs").find("input[type=file]");
dads(result,input);
})
function dads(result,input){
if(typeof FileReader==='undefined'){
result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
input.setAttribute('disabled','disabled');
}else{
$(input).unbind("change").on("change",function(){
var file = this.files[0];
if(!/image\/\w+/.test(file.type)){
alert("文件必须为图片！");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
$(result).append('<img src="'+this.result+'" alt="" />');
}
})
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家学习JavaScript程序设计有所帮助。
相关文章
随着移动互联网的不断普及，企业的网络宣传不仅只局限在PC端，还要在移动端发展。我们在自己的网站做了WAP手机完整之后，如果有用户通过手机访问我们的企业顶级域名网站，就要判断跳转到专为的WAP网站，下面小编给大家整理有关手机浏览器跳转WAP手机网站的相关内容2015-08-08
这篇文章主要为大家详细介绍了js canvas实现放大镜查看图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
在JavaScript开发中，被人问到：null与undefined到底有啥区别？2009-10-10
一个对于Array的简单扩展...2006-10-10
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
这篇文章主要介绍了js日期相关函数dateAdd,dateDiff,dateFormat等介绍,需要的朋友可以参考下2016-09-09
队列指的是一种受限的线性表，先进先出，今天通过本文带领大家认识队列及队列的应用，对JS数据结构与算法-队列结构相关知识感兴趣的朋友一起看看吧2022-11-11
本篇文章实例演示了Javascript的面向对象--接口的用法。希望对大家有所帮助，下面就随小编一起来看看吧2016-12-12
这篇文章主要介绍了移动端JS实现拖拽两种方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
今天小编就为大家分享一篇js事件on动态绑定数据,绑定多个事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了新手如何快速理解js异步编程，异步编程从早期的 callback、事件发布\订阅模式到 ES6 的 Promise、Generator 在到 ES2017 中 async，看似风格迥异，但是还是有一条暗线将它们串联在一起的，,需要的朋友可以参考下2019-06-06
最新评论