jquery图片预览,jquery图片预览插件
jquery 多图片预览
给你重新写了一个，直接拷贝到记事本另存为html就可以调试(Jquery是在线引用的)。
成都创新互联-专业网站定制、快速模板网站建设、高性价比西塞山网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式西塞山网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖西塞山地区。费用合理售后完善，10余年实体公司更值得信赖。
以下代码在IE8和FF下测试通过。
另：程序如果有什么问题可以HI我。
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
html
head
title New Document /title
script src="" type="text/javascript"/script
script type="text/javascript"
//全局变量
var FileCount=0;//上传文件总数
//添加上传文件按钮
function addFile(obj)
{
var filePath=$(obj).prev().val();
var FireFoxFileName="";
//FireFox文件的路径需要特殊处理
if(window.navigator.userAgent.indexOf("Firefox")!=-1)
{
FireFoxFileName=filePath;
filePath=$(obj).prev()[0].files.item(0).getAsDataURL();
}
if(!checkFile(filePath,FireFoxFileName))
{
$(obj).prev().val("");
return;
}
if(filePath.length==0)
{
alert("请选择上传文件");
return false;
}
FileCount++;
//添加上传按钮
var html='span';
html+='input id="f'+FileCount+'" name="'+FileCount+'" type="file"/ ';
html+='input type="button" value="添加" onclick="addFile(this)"/';
html+='/span';
$("#fil").append(html);
//添加图片预览
html='li';
html+='img id="img'+(FileCount-1)+'" src="'+filePath+'" width="100" height="100" style="cursor:pointer;" alt="暂无预览" /';
html+='br/';
html+='a href="#" name="img'+(FileCount-1)+'" onclick="DelImg(this)"删除/a';
html+='/li';
$("#ImgList").append(html);
}
//删除上传文件（file以及img）
function DelImg(obj)
{
var ID=$(obj).attr("name");
ID=ID.substr(3,ID.length-3);
$("#f"+ID).parent().remove();
$(obj).parent().remove();
return false;
}
//检查上传文件是否重复,以及扩展名是否符合要求
function checkFile(fileName,FireFoxFileName)
{
var flag=true;
$("#ImgList").find(":img").each(function(){
if(fileName==$(this).attr("src"))
{
flag=false;
if(FireFoxFileName!='')
{
alert('上传文件中已经存在\''+FireFoxFileName+'\'!');
}
else
{
alert('上传文件中已经存在\''+fileName+'\'!');
}
return;
}
});
//文件类型判断
var str="jpg|jpeg|bmp|gif";
var fileExtName=fileName.substring(fileName.indexOf(".")+1);//获取上传文件扩展名
if(FireFoxFileName!='')//fireFox单独处理
{
fileExtName=FireFoxFileName.substring(FireFoxFileName.indexOf(".")+1);
}
//alert(fileExtName);
if(str.indexOf(fileExtName.toLowerCase())==-1)
{
alert("只允许上传格式为jpg，jpeg，bmp，gif的文件。");
flag=false;
}
return flag;
}
/script
style type="text/css"
.fil
{
width:300px;
}
.fieldset_img
{
border:1px solid blue;
width:550px;
height:180px;
text-align:left;
}
.fieldset_img img
{
border:1px solid #ccc;
padding:2px;
margin-left:5px;
}
#ImgList li
{
text-align:center;
list-style:none;
display:block;
float:left;
margin-left:5px;
}
/style
/head
body
p上传预览图片:br
div id="fil" class="fil"
span
input id="f0" name="f0" type="file"/
input type="button" value="添加" onclick="addFile(this)"/
/span
/div
/p
div id="ok"
fieldset class="fieldset_img"
legend图片展示/legend
ul id="ImgList"
!--li
img id="img1" width="100" height="100" style="cursor:pointer;"
br/
a href="#" name="img1" onclick="DelImg(this)"删除/a
/li--
/ul
/fieldset
/div
/body
/html
用js、jquery如何实现上传图片的预览
$("#btnLoadPhoto").upload({ url: "../UploadForms/RequestUpload.aspx?action=photo", type: "json", callback: calla });
//获得表单元素
HttpPostedFile oFile = context.Request.Files[0];
//设置上传路径
string strUploadPath = "temp/";
//获取文件名称
string fileName = context.Request.Files[0].FileName;
补充：JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
怎么用jquery或者javascript实现:如图1的那个按钮，可以让上传或预览图片？
1、点击图1的那个按钮可以让用户选择上传的图片，选择了一张就在按钮前面预览，如果用户不想上传某张图片可以点击x取消，再点击上传按钮可以接着选择图片上传。
2、设置选择图片的按钮的 click 事件，去触发 #upload_file 的 click 事件，然后就可以点击图片按钮后，选择本地图片文件了。
3、设置上传按钮，其实一般手机版网页是没有上传按钮的，即选择图片后就通过 Ajax 上传图片了。
js/jquery如何实现一张图片的预览功能
img src="图片地址" width="20" height="20"/这样图片就变成20X20的了
反之设置大了就变大了，再加上一些特效。如淡化预览列表，淡出DIV（图片）。就实现了你要的预览功能
用jQuery图片上传怎样实现实时预览
可以上传上去再把存储路劲给img标签就实现了，但是涉及到存储，需要用到后台代码，比如php这些，把图片存入相应的文件夹，再把路劲给标签，就实现了无刷新显示了
jQuery File Upload 图片预览代码如何写
jQuery File Upload是上传文件的一个插件，不一定是图片，所以里面没做预览的支持。但是可以直接用jquery简单实现出来，代码如下：
/*
先在js里扩展一个uploadPreview方法
使用方法:
div
img id="ImgPr" width="120" height="120" //div
input type="file" id="up" /
把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }});
*/
jQuery.fn.extend({
uploadPreview: function (opts) {
var _self = this,
_this = $(this);
opts = jQuery.extend({
Img: "ImgPr",
Width: 100,
Height: 100,
ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
Callback: function () {}
}, opts || {});
_self.getObjectURL = function (file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
};
_this.change(function () {
if (this.value) {
if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("选择文件错误,图片类型必须是" + opts.ImgType.join("，") + "中的一种");
this.value = "";
return false
}
if ($.browser.msie) {
try {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
} catch (e) {
var src = "";
var obj = $("#" + opts.Img);
var div = obj.parent("div")[0];
_self.select();
if (top != self) {
window.parent.document.body.focus()
} else {
_self.blur()
}
src = document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'width': opts.Width + 'px',
'height': opts.Height + 'px'
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
}
} else {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
}
opts.Callback()
}
})
}
});
然后是HTML页面进行调用：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
html xmlns="
head
title图片上传预览演示/title
script src="jquery.min.js" type="text/javascript"/script
script src="16/uploadPreview.js" type="text/javascript"/script
script
$(function () {
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });
});
/script
/head
body
div style="width:500px;margin:0px auto;"h2图片上传预览演示/h2
divimg id="ImgPr" width="120" height="120" //div
input type="file" id="up" /
/div
/body
/html
文章题目：jquery图片预览,jquery图片预览插件
标题来源：http://pwwzsj.com/article/dsccgcg.html
