前端html预览,HTML5 上传前预览

下面是前端之家 f2er.com 通过网络收集整理的代码片段。

前端之家小编现在分享给大家，也给大家做个参考。

HTML5上传图片预览

请选择图片文件：JPG/GIF

$("#file0").change(function(){

var objUrl = getObjectURL(this.files[0]) ;

console.log("objUrl = "+objUrl) ;

if (objUrl) {

$("#img0").attr("src",objUrl) ;

}

}) ;

//建立一個可存取到該file的url

function getObjectURL(file) {

var url = null ;

if (window.createObjectURL!=undefined) { // basic

url = window.createObjectURL(file) ;

} else if (window.URL!=undefined) { // mozilla(firefox)

url = window.URL.createObjectURL(file) ;

} else if (window.webkitURL!=undefined) { // webkit or chrome

url = window.webkitURL.createObjectURL(file) ;

}

return url ;

}

以上是前端之家(f2er.com)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得前端之家网站内容还不错，欢迎将前端之家网站推荐给程序员好友。

前端html预览,HTML5 上传前预览相关推荐

html5上传视频和预览,HTML5 上传前预览
HTML5上传图片预览请选择图片文件:JPG/GIF $("#file0").change(function(){ var objUrl = getObjectURL(this. ...
input文件框选择本地图片后页面预览图片并获取图片长宽以及大小图片上传前预览
前面有转过一篇通过HTML5来实现图片上传前预览 ,现在借助FileReader也实现了这个需求.并且同时还可以获得图片的长宽相素以及图片文件的大小.demo如下: <html> < ...
alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
[ASP.NET2.0] asp.net在ie7中使用FileUpload上传前预览图片 [ZT]
asp.net在ie7中使用FileUpload上传前预览图片因为安全性问题,IE7禁用了image控件引用本地图片,为了这个问题郁闷了好几天,终于找到了解决方案,好东西要与大家分享,代码如下: 此 ...
Vue中通过el-upload组件实现上传前预览本地图片
1.实现效果如下图所示用户选择本地待上传的图片,选择成功后,上传组件隐藏,呈现本地预览组件,单击图片并实现图片的放大呈现 2.template(相当于html)部分的代码如下代码实现逻辑: 在el ...
html 上传图片前预览,HTML实现图片上传前预览
HTML5 Upload #destination{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(true,sizingMeth ...
JavaScript 图片的上传前预览（兼容所有浏览器）
功能描述通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点 ● 对于 Chrome.Fire ...
结合Bootstrap实现头像上传前预览
Html <div><div style="position: relative;border: 5px solid lightblue;width: 150px;heig ...

前端html预览,HTML5 上传前预览

请选择图片文件：JPG/GIF

前端html预览,HTML5 上传前预览相关推荐

最新文章

热门文章