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. leetcode-打家劫舍(动态规划)

    你是一个专业的小偷,计划偷窃沿街的房屋.每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警. 给定一个代表每 ...

  2. 166. Nth to Last Node in List

    Description Find the nth to last element of a singly linked list. The minimum number of nodes in lis ...

  3. 在几份docx文档中里查找某个值

    import docx, os def readDocx(fileName): doc = docx.Document(fileName) content = '\n'.join([para.text ...

  4. 从零开始的Python学习Episode 3——字符串格式化与for循环

    一.字符串格式化 利用一段注释记录想要输出的字符串格式,并用 %s . %d 或 %f 依次代替要输出的数据(%s代表字符串,%d代表数字,%f代表浮点数),然后在这段注释之后依次加上要输出的数据. ...

  5. RNN概述-深度学习 -神经网络

    一 RNN概述    前面我们叙述了BP算法, CNN算法, 那么为什么还会有RNN呢?? 什么是RNN, 它到底有什么不同之处? RNN的主要应用领域有哪些呢?这些都是要讨论的问题. 1) BP算法 ...

  6. [leetcode-738-Monotone Increasing Digits]

    Given a non-negative integer N, find the largest number that is less than or equal to N with monoton ...

  7. js经典试题之数据类型

    js经典试题之数据类型 1:输出"B" + "a" + + "B" + "a"的值: 答案:BaNaNa. 分析:因为+ ...

  8. 20172330 2017-2018-1 《Java程序设计》第八周学习总结

    学号 2017-2018-1 <程序设计与数据结构>第八周学习总结 教材学习内容总结 这一章主要是对多态性的学习: 由继承实现多态性 多态性引用能够随时间变化指向不同类型的对象. 对于多态 ...

  9. IE中的activex控件

    1.tree控件 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HE ...

  10. 对Android体系结构的理解--后续会补充

    1.最底层_硬件 任何Android设备最底层的硬件包括 显示屏, wifi ,存储设备 等. Android最底层的硬件会根据需要进行裁剪,选择自己需要的硬件. 2.Linux内核层 该层主要对硬件 ...