HTML代码
<div class="upload">
<input type="button" class="btn" onclick="browerfile.click()" value="上传">
<input type="file" id="browerfile" style="display: none;" class="test">
<div class="img_center">
<img src="" class="img1-img">
</div>
</div>
 
实现功能的js代码
//获取图片路劲的方法,兼容多种浏览器,通过createObjectURL实现
function getObjectURL(file){
var url = null;
if(window.createObjectURL != undefined){
url = window.createObjectURL(file);//basic
}else if(window.URL != undefined){
url = window.URL.createObjectURL(file);
}else if(window.webkitURL != undefined){
url = window.webkitURL.createObjectURL(file);
} return url;
} //实现功能代码
$(function(){
$("#browerfile").change(function(){
var path = browerfile.value;
var objUrl = getObjectURL(this.files[0]);
if(objUrl){
$('.img1-img').attr("src",objUrl);
}
})
})

  

简单实现JS上传图片预览功能的更多相关文章

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

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

  2. JS 上传图片 + 预览功能(二)

    简单粗暴 直接进入主题: Html <script src="../js/jquery-2.1.1.min.js"></script> <style& ...

  3. HTML5上传图片预览功能

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

  4. 【小月博客】用HTML5的File API做上传图片预览功能

    前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...

  5. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  6. js上传图片&预览(filereader)

    fileReader HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileRea ...

  7. 关于H5里的API,上传图片预览功能

    FileReader:读取本地图片文件并显示 写在开头 之前公司要求做一个H5页面,功能是照相和选择相册相片,并且能在屏幕上预览.然后我就傻里吧唧的各种找插件,因为有些插件不适配手机的型号,安卓机基本 ...

  8. html js 上传图片 预览

    第一段代码是我自己修改之后能够多选显示多预览图,也就是加了个循环,后面的代码是一些解释说明之类的,抄的 <!DOCTYPE html> <html> <head> ...

  9. HTML5拖放事件-上传图片预览功能

    主要用到的知识点有dataTransfer对象和FileReader(读取文件信息) 1.创建简单的HTML标签: <body> <div id="box"> ...

随机推荐

  1. TestNG套件测试

    TestNG套件测试 测试套件的测试是为了测试软件程序的行为或一系列行为的情况下,是一个集合.在TestNG,我们不能定义一套测试源代码,但它代表的套件是一个XML文件执行特征.这也允许灵活的配置要运 ...

  2. 【JavaScript&jQuery】前端资源大全

    综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.com/Jackson ...

  3. robot framework Selenium2关键字介绍

    *** Settings *** Library Selenium2Library *** Keywords *** Checkbox应该不被选择 [Arguments] ${locator} Che ...

  4. P3984 高兴的津津

    题目描述 津津上高中了.她在自己的妈妈的魔鬼训练下,成为了一个神犇,每次参加一次OI比赛必拿Au虐全场.每次她拿到一个Au后就很高兴.假设津津不会因为其它事高兴,并且她的高兴会持续T天(包包含获奖当天 ...

  5. [CF1103B]Game with modulo

    题目大意:交互题,有一个数$a(a\leqslant10^9)$,需要猜出它的值,一次询问为你两个数字$x,y(x,y\in[0,2\times10^9])$: 若$x\bmod a\geqslant ...

  6. [洛谷P4341][BJWC2010]外星联络

    题目大意:给你一个长度为$n(n\leqslant3\times10^3)$的字符串,要你求出其中出现次数大于$1$的子串,并按字典序输出次数. 题解:建$SAM$后求出每个点的$size$,最后按字 ...

  7. Elasticsearch之基本操作

    elasticsearch是一个是开源的(Apache2协议),分布式的,RESTful的,构建在Apache Lucene之上的的搜索引擎. 它有很多特点例如Schema Free,Document ...

  8. 【BZOJ4456】旅行者(最短路,分治)

    [BZOJ4456]旅行者(最短路,分治) 题面 BZOJ Description 小Y来到了一个新的城市旅行.她发现了这个城市的布局是网格状的,也就是有n条从东到西的道路和m条从南到北 的道路,这些 ...

  9. 洛谷 P2604 [ZJOI2010]网络扩容 解题报告

    P2604 [ZJOI2010]网络扩容 题目描述 给定一张有向图,每条边都有一个容量C和一个扩容费用W.这里扩容费用是指将容量扩大1所需的费用.求: 1. 在不扩容的情况下,1到N的最大流: 2. ...

  10. scala(一)

    一.Scala 简介 1.Scala语言既可用于大规模应用程序开发,也可以用于脚本编程,2001年由Martin Odersk 开发,主要优势 速度和它的表达性.一门函数式编程语言,既有面向对象的特点 ...