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. TPO-16 C1 Reserve the room for a rehearsal

    TPO-16 C1 Reserve the room for a rehearsal 第 1 段 1.Listen to a conversation between a Student and a ...

  2. 获取ip地址以及获取城市等信息

    class Program { static void Main(string[] args) { string ip = GetIP(); if (ip != null) { string city ...

  3. python计算工资个税

    # -*- coding: utf-8 -*- total = int(input("税前总计:")) #公积金10% Gongjijin = total * 0.1 print( ...

  4. Sql server在cmd下的使用

    方法一 在DOS提示符下,c:\>isql -U sa -P (此处输入SA密码) 注----大小写敏感 回车后会出现"1>"提示符,表明已成功,此时可在DOS下做任何 ...

  5. Python3 小工具-ARP欺骗

    在kali中使用 from scapy.all import * import optparse import os def send(pkt,interface): for p in pkt: se ...

  6. python模拟SQL语句操作文件

    1.需求 在文本界面输入SQL语句,查询相应的数据,例如输入下面的语句 print(''' 支持大小写的SQL语句查询,大写或者小写都可以 1. select * from db1.emp 2. se ...

  7. 【OSG】 报错:丢失osg100-osgDB.dll

    如果你bin目录已经添加到了环境变量的path里面,还报这个错的话. 或许你重启一下电脑就可以了..我就这么解决的.

  8. MVC4 DropDownList (二) — 省市联动

    1.添加省份和城市类 //省份 public class Province { public int Id { get; set; } public string Name { get; set; } ...

  9. 相机上的P,S,A,M分别是什么单词的缩写?

    程序曝光 Programmed Auto快门优先 Shutter Priority光圈优先 aperture-priority 全手动模式 Manual Mode

  10. 转 PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)

    PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)   通过curl_setopt()函数可以方便快捷的抓取网页(采集很方便),curl_setopt 是php的一个 ...