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. Lua学习笔记(1): HelloWorld和数据类型

    Lua是一个轻量级的脚本语言,由c语言编写,容易嵌入到应用中,深受游戏开发者的青睐 环境安装 选用SciTE作为lua的IDE 可以在github找到这个开源的软件 SciTE下载链接 安装好之后打开 ...

  2. spark dataset join 使用方法java

    dataset<Row> df1,df2,df3 //该方法可以执行成功 df3= df1.join(df2,"post_id").selectExpr("h ...

  3. OSS文件上传及OSS与ODPS之间数据连通

    场景描述        有这样一种场景,用户在自建服务器上存有一定数量级的CSV格式业务数据,某一天用户了解到阿里云的OSS服务存储性价比高(嘿嘿,颜值高),于是想将CSV数据迁移到云上OSS中,并且 ...

  4. Matlab结构体定义

    定义一个Matlab结构体的代码,以飞行器为例: classdef flightpro properties pos = [ ]; RGB = [ ]; rate; type; end end

  5. python leveldb 文档

    标签(空格分隔): python leveldb import leveldb db = leveldb.LevelDB('./db') db.Put('hello', 'world') print ...

  6. 创新手机游戏《3L》开发点滴(1)——道具、物品、装备表设计

    一.游戏物品/道具系统数据模型设计特点 为了让游戏更加的丰富,我们1201团队的新手机游戏设计了道具系统.于是丰富了游戏.取悦了玩家,哭了开发——道具/物品数据子系统是简单的.复杂的.不确定的: 简单 ...

  7. UVALive - 6872 Restaurant Ratings 数位dp

    题目链接: http://acm.hust.edu.cn/vjudge/problem/113727 Restaurant Ratings Time Limit: 3000MS 题意 给你一个长度为n ...

  8. 3dContactPointAnnotationTool开发日志(三)

      今天的目的是把obj文件导到场景里.具体将制定路径的obj文件导进去我用的是这个方法.导进去后呈现的是一个黑色的影子.   导入后还想实现一下缩放功能,请看这个方法.缩放实现起来也很简单.   光 ...

  9. Perfmon - 脚本自动监控

    PerfMon-Windows性能监视器是个好东西,可以辅助我们分析发生问题时间段服务器资源占用情况,但是部署性能计数器确实一个相当麻烦的事情,往往这种枯燥的事别人还做不了,只能由我们这些希望获取到P ...

  10. FastReport.net 常用方法

    一.页面设置 情景:FastReport设计器页面默认设置为A4纸,但如果需要显示的字段过多,这时就出现了页面的大小无法满足完整显示所需内容的问题. 解决:出现这个问题后,我们可以在来到"文 ...