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. HDU4787_GRE Words Revenge

    这个题目做得泪牛满面. 题目为给你若干串,有的表示添加一个串,有的表示询问一个串有多少个字串为前面出现过的串. 题目一看就知道肯定是AC自动机(不过后缀自动机也是可以的) 但是细想就会发现AC自动机好 ...

  2. CodeForces 860D Wizard's Tour

    题意 给出一张无向图,要求找出尽量多的长度为2的不同路径(边不可以重复使用,点可以重复使用) 分析 yzy:这是原题 http://www.lydsy.com/JudgeOnline/problem. ...

  3. NoSQL - Redis应用场景

         问题的引入 DB(Oracle.MySQL.Postgresql等)+Memcached 这种架构模式在我们生产环境中十分常见,一般我们通过Memcached将热点数据加载到cache,应用 ...

  4. 【开发工具IDE】解决IntelliJ IDEA 创建Maven项目速度慢的问题

    方法一(推荐) 在创建Maven项目时加上 archetypeCatalog=internal 参数,如下: 方法二 在maven的VM Options加上-DarchetypeCatalog=int ...

  5. MariaDB插入中文出现???情况

    本来打算创建一个测试表进行一个简单的实验,发现创建完python_test表后插入数据后,select发现所有中文都变成问号了,这一看就是出现了乱码 MariaDB [lhc]> create ...

  6. BZOJ4896 THUSC2016补退选(trie)

    字符串扔进trie,vector记录每个前缀出现次数的最大值的更新记录即可. #include<iostream> #include<cstdio> #include<c ...

  7. 【刷题】BZOJ 2096 [Poi2010]Pilots

    Description Tz又耍畸形了!!他要当飞行员,他拿到了一个飞行员测试难度序列,他设定了一个难度差的最大值,在序列中他想找到一个最长的子串,任意两个难度差不会超过他设定的最大值.耍畸形一个人是 ...

  8. IntelJ 快捷键

    1.在IntelJ中和Eclipse中稍有不同,在Eclipse中,输入main再按Alt+/即可自动补全main函数,但是在IntellJ中则是输入psvm,选中即可 2.在方法体内部有for循环, ...

  9. 基于线程池技术的web服务器

    前言:首先简单模拟一个场景,前端有一个输入框,有一个按钮,点击这个按钮可以实现搜索输入框中的相关的文本和图片(类似于百度.谷歌搜索).看似一个简单的功能,后端处理也不难,前端发起一个请求,后端接受到这 ...

  10. cpu的核数

      相信大多数的人都知道CPU区分单核.双核.四核.六核.八核等,一些电脑小白肯定认为核心越多肯定性能越强,但是不少装机用户发现,有的CPU型号虽然是双核,但是要比一些四核还要贵,很多人感到迷惑,那么 ...