基于JavaScript FileReader上传图片显示本地链接
2019/6/27 22:23:56
本文主要是介绍基于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程序设计有所帮助。
这篇关于基于JavaScript FileReader上传图片显示本地链接的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-06vue 新建功能多条数据(还没和后端交互)还能看详情 数据是前端缓存到本地吗?-icode9专业技术文章分享
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode