您的位置：首页 > Web前端 > JavaScript

js 图片上传前浏览

2015-05-30 17:09 901 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Document</title>

<script src="js/require.js" defer async="true" data-main="js/main2"></script>

<script type="text/javascript">

function pic(upload){
var file = document.getElementById("up1");

var browser_agent = navigator.userAgent;

if (browser_agent.indexOf("Firefox")!=-1||browser_agent.indexOf("Chrome")!=-1) {

var imgPath = window.URL.createObjectURL(upload.files[0]);
var imgDiv = document.getElementById("localfile");
imgDiv.src=imgPath;
imgDiv.style.display="block";

imgDiv.style.width="200px";
imgDiv.style.height = "200px"

}else{

var Preview = document.getElementById('localfile');
Preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upload.value;
Preview.style.width = "200px";
Preview.style.height = "200px";
Preview.style.display="block";
}
}

</script>

</head>

<body>

<input type="file" class="upload" id="up1" onchange="pic(this);">
<div id="tip"></div>
<img src="" alt="" id="localfile" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);display:none">

</body>
</html>

添加的一个jquery小插件，上传前预览的。 (IE下可能会有问题，还没解决好)

(function($) {
$.fn.showUpPic = function(){
fileBtn = this;
this.on('change',function(){
var imgPath = window.URL.createObjectURL(fileBtn[0].files[0]);
if(fileBtn.siblings('img')[0]!==undefined){
fileBtn.siblings('img')[0].src = imgPath;
}else{
var img = document.createElement("img");
img.style.width="50px";
img.style.width="100px";
img.src = imgPath;
fileBtn[0].parentNode.appendChild(img);
}
});
};
})(jQuery);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航