基于Java Script语言文件阅读器上传图片显示本地链接

简介

使用字符输入流对象，web应用程序可以异步的读取存储在用户计算机上的文件（或者原始数据缓冲)内容，可以使用文件对象或者一滴对象来指定所要处理的文件或数据。其中文件对象可以是来自用户在一个输入类型='text' /元素上选择文件后返回的文件列表对象，也可以来自拖放操作生成的数据传输对象，还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果。

页面中多个，上传多个图片演示代码

！Doctype htmlhtml标题上传图片显示预览图/title style # result img { height :100 px；显示：内嵌块；右边距：10 px边距-底部：10 px}/style/head body div class=' add _ imgs ' p标签请选择一个图像文件：/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 class=' add _ imgs ' p标签请选择一个图像文件：/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/脚本src=' http : jquery-2。2 .1 .量滴js /脚本脚本$('。' add _ img _ BTN ' .解除绑定("单击")。on('click ')，function(){ $(this).父母('。add _ imgs ').find('input[type=file]).单击();定义变量结果=$(这个).parent()；定义变量输入=$(这个).父母('。add _ imgs ').find(' input[type=file]')；爸爸们(结果、输入);})函数爸爸们(结果，输入){ if(文件读取器的类型===' undefined '){ result。innerhtml='抱歉，你的浏览器不支持文件阅读器'；input.setAttribute('disabled '，' disabled ')；}else{ $(输入)。解除绑定("更改")。on('change '，function(){ var file=this。文件[0]；if(！/image\/\w /.test(file.type)){ alert('文件必须为图片!');返回false } var reader=new FileReader()；reader.readAsDataURL(文件);读者。onload=函数(e){ $(结果).追加(' img src=' http : '这。结果' ' alt=' '/')；} })} }/脚本/正文/html以上就是本文的全部内容，希望对大家学习Java脚本语言程序设计有所帮助。