js实现预览待上传的本地图片,代码如下:

<form name="form5" id="form5" method="post" action="#">
<input type="file" name="file5" id="file5" onchange="preview5()"/>
</form>
<script type="text/javascript">
//预览待上传的图片
//by www.jbxue.com
function preview5(){
var x = document.getElementById("file5");
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
var y = document.getElementById("img5");
if(y){
y.src = "file://localhost/" + x.value;
}else{
var img=document.createElement("img"); img.setAttribute("src","file://localhost/"+x.value);
img.setAttribute("width","120");
img.setAttribute("height","90");
img.setAttribute("id","img5");
document.getElementById("form5").appendChild(img);
}
}else{
alert("您选择的不是图像文件。");
}}
</script>

用js实现预览待上传的本地图片的更多相关文章

  1. 原生js实现图片预览并上传

    最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...

  2. 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现

    前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...

  3. js多图预览及上传功能

    <%-- Created by IntelliJ IDEA. User: Old Zhang Date: 2018/12/27 Time: 11:17 To change this templa ...

  4. H5-FileReader实现图片预览&Ajax上传文件

    图片预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. 前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome(学习到的知识)

    文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...

  6. Mark : Bootstrap fileInput控制预览页面上传、删除、详情按钮

    Bootstrap fileInput默认预览上传效果: 而我们可能想要的结果是: 这时候可以通过初始参数layoutTemplates来控制:

  7. html5 选择多张图片在页面内预览并上传到后台

    版权声明:本文为博主原创文章,未经博主允许不得转载. http://blog.csdn.net/huangxin112/article/details/74956462 需求:点击选择图片(可选多张) ...

  8. js-jssdk微信H5选择多张图片预览并上传(兼容ios,安卓,已测试)

    值得注意的是: 1.在微信H5中选择图片运用:wx.chooseImage,成功后返回:  res.localIds用于上传图片使用    上传图片:wx.uploadImage. 2.上传图片的时候 ...

  9. 如何预览将要上传的图片-使用H5的FileAPI

    这篇将要说的东西已经不新鲜了. 参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有 ...

随机推荐

  1. maven 下载源码

    mvn eclipse:eclipse  -DdownloadSource=true

  2. 多个桌面Deskspace如何使用

    1 给Deskspace设置背景.在DeskSpace选项中设置显示背景为天空箱体图像(软件自带的图像效果,也可以使用静态图像,即自己的图片) 2 给六个桌面各设置一个背景(也可以使用同一个背景)右击 ...

  3. STL - 容器 - Forward List

    forward list是一个行为受限的list, 不能走回头路. 它只提供前向迭代器, 而不提供双向迭代器. eg: rbegin(), rend(), crbegin(), crend()这些都不 ...

  4. PyQt5——安装Eric6

    Eric6是PyQt编程最理想的IDE.windows版的安装很简单.下面的安装也是在windows上进行的.linux版的我安装有点问题,有时间再折腾. 下载: Eric6官网:http://eri ...

  5. serialize 序列化 +号处理

    少说多做,直接运行代码,代码中有注释: <!DOCTYPE html> <html lang="zh"> <head> <meta cha ...

  6. 封装document.getElementById(id)

      CreateTime--2016年12月18日11:42:45Author:Marydon封装document.getElementById(Id)方法 <script type=" ...

  7. 整理两个JVM博客集合,空闲时候可以看

    纯洁的微笑写的:https://www.cnblogs.com/ityouknow/p/5614961.html 集合:http://www.cnblogs.com/ityouknow/categor ...

  8. iOS自定义从底部弹上来的View

    概述 自定义蒙层弹起View,点击一下遮罩或界面上关闭按钮,页面会自动下去(从上向下) 详细 代码下载:http://www.demodashi.com/demo/10724.html 在一些少数据没 ...

  9. Android 5.0 + IDA 6.8 调试经验分享

    如今升级快.网上的资料仅仅能做參考. 学到了NDK逆向这一块,昨天为了能让IDA 能动态调试SO,瞎折腾了非常久,这里分享一下我的经验. 工具: IDA pro 6.8 Android 5.x IDA ...

  10. MySQL中的共享锁

    MySQL对外提供了一种应用层级别的共享锁,通过这个共享锁,数据库之上的应用程序可以实现互斥功能.这个共享锁通过一组MySQL 内置函数实现. GET_LOCK(str,timeout)  这个函数的 ...