js 预览本地上传图片

网址http://jingyan.baidu.com/article/215817f78370dd1edb142372.html

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td height="101" align="center">

<div id="localImag" style="border: 1px solid red;">

<img id="preview" src="" width="100" height="100" style="display: block;border: 1px solid blue;" />

</div>

</td>

</tr>

<tr>

<td align="center" style="padding-top:10px;">

<form method="get" action="xznetwork" name="textfile">

<input type="file" name="file" id="doc" multiple="multiple" style="width:150px;" onchange="javascript:setImagePreview();">

</form>

</td>

</tr>

</tbody>

</table>

</body>

<script type="text/javascript">

//下面用于图片上传预览功能

function setImagePreview(avalue) {

//input

var docObj = document.getElementById("doc");

//img

var imgObjPreview = document.getElementById("preview");

//div

var divs = document.getElementById("localImag");

if (docObj.files && docObj.files[0]) {

//火狐下,直接设img属性

imgObjPreview.style.display = ‘block‘;

imgObjPreview.style.width = ‘100px‘;

imgObjPreview.style.height = ‘100px‘;

//imgObjPreview.src = docObj.files[0].getAsDataURL();

//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式

imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

} else {

//IE下,使用滤镜

docObj.select();

var imgSrc = document.selection.createRange().text;

var localImagId = document.getElementById("localImag");

//必须设置初始大小

localImagId.style.width = "100px";

localImagId.style.height = "100px";

//图片异常的捕捉,防止用户修改后缀来伪造图片

try {

localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

} catch(e) {

alert("您上传的图片格式不正确,请重新选择!");

return false;

}

imgObjPreview.style.display = ‘none‘;

document.selection.empty();

}

return true;

}

</script>

时间: 2024-10-08 22:42:56

js 预览本地上传图片的相关文章

HTML5预览本地图片

以http协议开头的url的网页,即服务器上的网页是不能显示计算机本地图片的,如果想查看本地图片但不使用服务端的上传功能,可以使用html5的fileReader实现. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>html5预览本地图片</title> </head> <style type="text/css&

js:s上次预览,上传图片预览,图片上传预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

[pdf.js]预览pdf时,中文名称乱码的问题

在项目中使用了pdf.js的方式预览pdf,但针对中文名称的时候会出现乱码,导致找不到该文件而出现错误. 解决办法 <script src="viewer.js" charset="gb2312"></script> 结果

js预览PDF文件,使用iframe实现

有时候需要预览PDF文件,需要实现可放大.缩小.下载.打印等功能,我使用了iframe框架. 实现效果: 实现代码: 我直接写在了一个公共组件中,在需要预览的页面直接引用该子组件即可. <iframe :src="src" frameborder="0" style="width: 100%; height: 100%"></iframe> data() { return { src: 'http://storage.xu

JS预览图像将本地图片显示到浏览器上

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> /** * 从

js预览上传图片

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #preview, .img, img { width: 200px; height: 200px; } #preview { border:

JavaScript使用html5 fileReader来预览本地图片

以http协议开头的url的网页,即服务器上的网页是不能显示计算机本地图片的.如果想查看本地图片但不使用服务端的上传功能,可以使用html5的fileReader实现.(IE10以下的浏览器不支持这个功能) <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>html5 fileReader</title> </head> <st

javascript预览本地图片

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="buexplain"> <meta na

input 文件上传实现本地预览

上传图片 本地预览 获取图片大小 上传视频 本地预览 获取视频 duration 视频大小 图片上传 主要涉及内容 input accept filesList URL.createObjectURL() URL.revokeObjectURL() input file <label for='upload'></label> // ::before :: after 用于扩展可点击区域 <input type="file" id="upload