php图片上传带预览插件,Jquery图片在线预览.uploadPreview图片上传预览插件.兼容IE.谷歌.火狐等等浏览器...

【温馨提示】源码包解压密码：www.youhutong.com

方法一:uploadPreview图片上传预览插件:

1.首先在html页面的head中引入jQuery库文件和uploadPreview图片上传预览插件文件.

2.添加JS.当然下面的ID都是看HTML定义的.

$(function(){

//up: input(文件域)的ID.   ImgPr:显示预览图片的img标签的ID

//Width:设置宽.            Height:设置高

$("#up").uploadPreview({Img:"ImgPr", Width:120, Height:120 });

});

全部代码:

$(function(){

$("#up").uploadPreview({Img:"ImgPr", Width:120, Height:120 });

});

        

方法二:JS在线预览方法:

图片预览 - 小川编程

function setImageView(val,avalue) {

var docObj=document.getElementById(val);

var imgObjPreview=document.getElementById(avalue);

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

imgObjPreview.style.display = 'block';

imgObjPreview.style.width = '170px';

imgObjPreview.style.height = '80px';

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

}else{

docObj.select();

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

var localImagId = document.getElementById(avalue);

localImagId.style.width = "170px";

localImagId.style.height = "80px";

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;

}

οnchange="setImageView('input_thumb','thumb');" />

来源:小川编程:http://www.youhutong.com/

复制上面的代码去看看效果吧!

浏览器启用弹出窗口过滤功能，将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了！

【温馨提示】源码包解压密码：www.youhutong.com

郑重声明：

1、本站源码仅供个人学习研究和交流使用，请于下载后二十四小时内删除

2、本站大多资源来源于互联网、用户分享，仅供学习交流使用，本站不提供任何技术支持

3、本站联系方式Email：[e-mail] ，收到邮件会第一时间处理。

4、如侵犯到任何版权问题，请立即告知本站(立即在线告知)，本站将及时删除并致以最深的歉意