js实现上传图片预览方法
图片预览的 javascript 本地操作
早期浏览器,不能将本地图片作为页面元素处理,要实现图片预览需要将图片先上传到服务器,再从服务器取得进行预览
现代的浏览器功能越来越全面,因此可以实现对一些数据的本地处理 Chrome MsEdge(ie11) Firefox
上图的html
<tr> <td>缩略图</td> <td> <a href="javascript::void(0)" class="fileBtn"> 选择文件 <input type="file" id="file_pic"> </a> </td> </tr> <tr> <td></td> <td><img id="file_view" style="width:110px"></td> </tr>
// 下面用于图片上传预览功能 objc : { file, pic, width } yqUI.setImagePreview = function(objc) { var docObj=document.getElementById(objc.file); var imgObjPreview=document.getElementById(objc.pic); if(docObj.files &&docObj.files[0]){ imgObjPreview.style.display = 'block'; imgObjPreview.style.width = objc.width; imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); return true; } else { return false; }; }; // 使用该控件, opts 配置对象 var opts = { file : 'file_pic', pic : 'file_view', width : '180px' } yqUI.setImagePreview(opts);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
JavaScript File API实现文件上传预览
一.概述 以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScript 一直是无法访问本地文件的.于是,为了在浏览器中能够实现诸如拖拽并上传本地文件这样的功能,我们就不得不求助于特定浏览器所提供的各种技术了.比如对于 IE,我们需要通过 ActiveX 控件来获取对本地文件的访问能力,而对于 Firefox,同样也要借助插件开发.由于不同浏览器的技术实现不尽
-
js实现上传图片及时预览
本文实例为大家分享了javascript图片预览功能实现的具体代码,供大家参考,具体内容如下 先为大家分享一段关于js图片预览的代码,兼容火狐和谷歌浏览器 /* 案例展示图片预览 */ $(function(){ $("#file0").bind("change",function(){ clickupLoad(); }); }); function clickupLoad(){ var imgObject = document.getElementById('fi
-
JS HTML5拖拽上传图片预览
1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取
-
js实现上传图片之上传前预览图片
上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出来了.功能很简单,却很实用. 预览图片的js代码: 复制代码 代码如下: <script type="text/javascript"> function setImagePreview(docObj,localImagId,imgObjPreview) { if(docObj
-
js 上传图片预览问题
最近也经常遇到浏览器兼容的问题,昨天遇到上传图片预览问题,发现IE8和火狐不能显示,弄了很久,早上终于解决了很高兴.故跟大家分享下,我也多是网上找的,自己总结的一下,希望对大家有点帮助. 我们一般根据IE6.IE7进行开发的时候写图片预览的代码是: 复制代码 代码如下: document.getElementById("img").src = document.getElementById("file").value; 还有一种方式 复制代码 代码如下: <d
-
js实现上传图片预览的方法
本文实例讲述了js实现上传图片预览的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: function PreviewImage(imgFile) { var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length); filextension=filextension.toLowerCase(); if ((filext
-
Javascript图片上传前的本地预览实例
图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子. 原理: 分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL):把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.URL.createObjectURL()方法. Fil
-
javascript实现input file上传图片预览效果
本文实例介绍了javascript实现input file上传图片预览效果的详细代码,分享给大家供大家参考,具体内容如下 运行效果图: 具体实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-1.1
-
JavaScript File API文件上传预览
对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情,通常我们能做的仅仅是使用<input type="file">标签来上传文件.实现过程是:选取文件的时候value 属性保存了用户指定的文件的名称,表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名.再获取服务器返回的地址,然后做预览. 但是如果有一天我们要上传一个图片,传了图片后预览想换另一张图片,就又得先上传到服务器再预览.在网络比较慢的情况下,这样真的很折腾. 所以我们某些时候需要先预览
-
上传图片预览JS脚本 Input file图片预览的实现示例
在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预览的功能,还被我给翻了出来,在这里做个记录,方便自己以后用,也方便其他需要的朋友! 代码很简单,如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
随机推荐
- perl的logwrapper使用实例代码
- 详解vue-resource promise兼容性问题
- iOS实现百度外卖头像波浪的效果
- python使用MySQLdb访问mysql数据库的方法
- javascript数组操作总结和属性、方法介绍
- ASP.NET保存PDF、Word和Excel文件到数据库
- php提交过来的数据生成为txt文件
- php中array_unshift()修改数组key注意事项分析
- asp之自动闭合HTML/ubb标签函数附简单注释
- js的.innerHTML = ""IE9下显示有错误的解决方法
- VBS教程:VBscript语句-Exit 语句
- SQL Server 数据库安全管理介绍
- MySQL 从全库备份中恢复指定的表和库示例
- 用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
- vue发送websocket请求和http post请求的实例代码
- JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
- 原生js基于canvas实现一个简单的前端截图工具代码实例
- linux下安装golang的方法
- Unity3D实现模型淡入淡出效果
- VScode+Java配置与使用的详细步骤