html上传图片的预览功能实现
表单代码(仅取上传文件部分):
<input class="selectImg" style="position:absolute;opacity: 0;width:100px;height:100px;" type="file" name="coverChart" onchange="showImg(this)">
js代码:
// 图片预览
function showImg(obj) {
$(".doShow").css("background-image", "url('" + getObjectURL(obj.files[0]) + "')");
} // 不同浏览器获得图片url
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file) ;
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file) ;
}
return url;
}
参考链接:https://blog.csdn.net/man_zuo/article/details/83115212
html上传图片的预览功能实现的更多相关文章
- js上传图片及预览功能
详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...
- nodejs实现本地上传图片并预览功能(express4.0+)
Express为:4.13.1 multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片 ...
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
方法一: js: /** * 上传图片本地预览方法 * @param {Object} fileObj 上传文件file的id元素 fresh-fileToUpload * ...
- jquery 上传图片即时预览功能
<script type="text/javascript"> jQuery.fn.extend({ uploadPreview: ...
- 上传图片带预览功能兼容IE和火狐等主流浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- URL.createObjectURL() 实现本地上传图片 并预览功能
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- JS 上传图片 + 预览功能(一)
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- 【小月博客】用HTML5的File API做上传图片预览功能
前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...
随机推荐
- Java学习(十二)
今天安装讲师推荐下载了一个叫Hbuiler X的IDE,并且学习了选择器的知识. 作为练习,写了一下的代码 <!DOCTYPE html> <html> <head> ...
- Mac 下 Nginx 配置使用
安装 homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/m ...
- [hdu6974]Destinations
注意到一个人的三条链一定不会同时选(忽略仅选一个终点的限制),因为其有公共点(起点) 换言之,问题相当于给定$3m$条链,选择$m$条没有公共点的链,并最小化代价和 进一步的,显然也不存在多于$m$条 ...
- [hdu6316]Odd shops
记$m=10$,即商品的种类 记$g(x)=1+\sum_{i=1}^{m}a_{i}x_{i}$,问题即求$f_{n}(x)=g^{n}(x)$非0项数(模2意义下) 注意到$f^{2}(x)\eq ...
- [loj2850]无进位加法
(似乎漏了一个数据范围,cf上的题面中还有$\sum L\le 3\cdot 10^{5}$) 考虑$a_{i}=2^{k_{i}}$时(不妨$k_{1}\ge k_{2}\ge ...\ge k_{ ...
- [Net 6 AspNetCore Bug] 解决返回IAsyncEnumerable<T>类型时抛出的OperationCanceledException会被AspNetCore 框架吞掉的Bug
记录一个我认为是Net6 Aspnetcore 框架的一个Bug Bug描述 在 Net6 的apsnecore项目中, 如果我们(满足以下所有条件) api的返回类型是IAsyncEnumerabl ...
- java 必应壁纸批量下载
基于java 必应壁纸批量下载 - rookie丶k - 博客园 (cnblogs.com)实现 上面代码运行本地有点小问题,改了改 1.ssl验证 2.请求头 3.需要优化下载速度,多线程方式(还不 ...
- ppt的作用
ppt不重要,使用ppt的场合很重要. 演讲分享,答辩总结,商业竞标,新年计划,年终总结.
- Springboot .properties或.yml配置文件读取pom.xml文件值
有时候配置文件需要读取pom文件配置<properties></properties>中间自定义属性值的时候可以用@@获取 例:@package.parameter@ 然后还需 ...
- 62-Binary Tree Level Order Traversal
Binary Tree Level Order Traversal My Submissions QuestionEditorial Solution Total Accepted: 102531 T ...