简单实现JS上传图片预览功能
<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>
//获取图片路劲的方法,兼容多种浏览器,通过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上传图片预览功能的更多相关文章
- JS 上传图片 + 预览功能(一)
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- JS 上传图片 + 预览功能(二)
简单粗暴 直接进入主题: Html <script src="../js/jquery-2.1.1.min.js"></script> <style& ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- 【小月博客】用HTML5的File API做上传图片预览功能
前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- js上传图片&预览(filereader)
fileReader HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileRea ...
- 关于H5里的API,上传图片预览功能
FileReader:读取本地图片文件并显示 写在开头 之前公司要求做一个H5页面,功能是照相和选择相册相片,并且能在屏幕上预览.然后我就傻里吧唧的各种找插件,因为有些插件不适配手机的型号,安卓机基本 ...
- html js 上传图片 预览
第一段代码是我自己修改之后能够多选显示多预览图,也就是加了个循环,后面的代码是一些解释说明之类的,抄的 <!DOCTYPE html> <html> <head> ...
- HTML5拖放事件-上传图片预览功能
主要用到的知识点有dataTransfer对象和FileReader(读取文件信息) 1.创建简单的HTML标签: <body> <div id="box"> ...
随机推荐
- hive表信息查询:查看表结构、表操作等--转
原文地址:http://www.aboutyun.com/forum.PHP?mod=viewthread&tid=8590&highlight=Hive 问题导读:1.如何查看hiv ...
- 【bzoj2656】[Zjoi2012]数列(sequence) 高精度
题目描述 给出数列 $A$ 的递推公式如下图所示,$T$ 次给定 $n$ ,求 $A_n$ . 输入 输入文件第一行有且只有一个正整数T,表示测试数据的组数.第2-T+1行,每行一个非负整数N. 输出 ...
- 学习Python最好的方法就是实践和教程并行,以下有一些资源和教程,还有一些学习思维导图:
1.Python 的 14 张思维导图下载地址: https://woaielf.github.io/2017/06/13/python3-all/ 2.Python基础教程|菜鸟教程: http:/ ...
- Qt——数据的隐式共享
一.隐式共享类 在Qt中有很多隐式共享类( Implicitly Shared Classes ),什么是隐式共享呢,请参考官方文档的说明. 好吧,翻译一下—— 许多C++类隐式地共享数据,使得资源使 ...
- addEventListener和attachEvent区别
addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome.FireFox.Opera.Safari.IE9.0及其以上版本都支持该函数:但是,IE8.0及其以 ...
- BZOJ3711 PA2014Druzyny(动态规划+cdq分治+线段树)
显然可以dp:设f[i]为前i个人最多能分多少组,则f[i]=max{f[j]}+1 (cmax<=i-j<=dmin). 容易发现d的限制是一段连续区间,二分或者随便怎么搞都行.c则有点 ...
- l洛谷 (水题)P4144 大河的序列
题目戳 Solution: 这题前面都是废话,关键的一句就是本题求的是序列中连续一段的相与值(&)+相或值(|)最大,然后对这个值进行快速幂取模.考虑到两个数相与最大能得到的就是这两个数中的最 ...
- Xor Sum HDU - 4825(01字典序板题)
#include <iostream> #include <cstdio> #include <sstream> #include <cstring> ...
- list的4种遍历方式
import java.util.ArrayList;import java.util.Iterator;import java.util.List; import com.hbut.domain.P ...
- LINUX内核分析第四周——扒开系统调用的三层皮
LINUX内核分析第四周--扒开系统调用的三层皮 李雪琦 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course ...