Input标签
<input  type="file" name="pic" onchange="changepic(this)" multiple="multiple"/>

 JS方法

            function changepic(obj) {
//console.log(obj.files[0]);//这里可以获取上传文件的name
var newsrc = getObjectURL(obj.files[0]);
document.getElementById('show').src = newsrc;
}
function getObjectURL(file) {
var url = null;
// 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已
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;
}

  

input file上传图片预览,非插件的更多相关文章

  1. 前端实现input[type='file']上传图片预览效果

    众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现 ...

  2. 上传图片预览JS脚本 Input file图片预览的实现示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 一段上传图片预览JS脚本,Input file图片预览的实现

    在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预 ...

  4. input file 模拟预览图片。

    首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用 ...

  5. HTML5上传图片预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  6. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  7. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  8. JS 上传图片 + 预览功能(一)

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  9. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

随机推荐

  1. Java开发工程师(Web方向) - 03.数据库开发 - 第3章.SQL注入与防范

    第3章--SQL注入与防范 SQL注入与防范 经常遇到的问题:数据安全问题,尤其是sql注入导致的数据库的安全漏洞 国内著名漏洞曝光平台:WooYun.org 数据库泄露的风险:用户信息.交易信息的泄 ...

  2. 自己来编写一份 Python 脚本 第一版

    解决问题 我们已经探索了 Python 语言中的许多部分,现在我们将通过设计并编写一款程序来了解如何把这些部分组合到一起.这些程序一定是能做到一些有用的事情.这节的Python教程就是教大家方法去学习 ...

  3. 欢迎来怼——第14次Scrum会议(10/26)

    一.小组信息 队名:欢迎来怼小组成员队长:田继平成员:李圆圆,葛美义,王伟东,姜珊,邵朔,冉华 小组照片 二.开会信息 时间:2017/10/26  17:00~17:13(总计13min).地点:计 ...

  4. Thunder团队第一周 - Scrum会议2

    Scrum会议2 小组名称:Thunder 项目名称:待定 Scrum Master:李传康 工作照片: 参会成员: 王航:http://www.cnblogs.com/wangh013/ 李传康(M ...

  5. python实现post请求

    今天无论如何都要留下一些什么东西... 可以说今天学到一个新的一个东西,也需要分享出来,给更多的人去使用. 今天爬取的数据里面是客户端向服务器端发送加密过的token和一些页码之类的一个数据.(我主要 ...

  6. SVM之问题形式化

    >>>SVM之问题形式化 SVM之对偶问题 SVM之核函数 SVM之解决线性不可分 写在SVM之前——凸优化与对偶问题 SVM内容繁多,打算用五篇文章来记述.SVM之问题形式化描述给 ...

  7. CentOS 7 开放防火墙端口

    我:最近在使 CentOS 7时发现在本地不能访问linux上8080端口,以上是我的操作,修改后访问成功 CentOS 7 开放防火墙端口 命令 最近公司新的server要求用CentOS7, 发现 ...

  8. Jmeter系列-webdriver插件

    1.下载地址    JMeterPlugins-WebDriver-1.1.2 2.将JMeterPlugins-WebDriver-1.1.2\lib\ext中的*.jar拷贝到D:\apache- ...

  9. 在ios 上 按钮 disabled 样式显示异常

    将input,button或textarea设置为disabled后,在iphone手机上样式将被覆写-webkit-appearance:none; 文字的颜色还是灰色. 原本在android 上 ...

  10. BZOJ 1040 骑士(环套树DP)

    如果m=n-1,显然这就是一个经典的树形dp. 现在是m=n,这是一个环套树森林,破掉这个环后,就成了一个树,那么这条破开的边连接的两个顶点不能同时选择.我们可以对这两个点进行两次树形DP根不选的情况 ...