js/jquery上传图片的问题
就是点击加号可以添加一张图片上传会显示缩略图，并在缩略图后面还有加号可以继续添加图片（换言之在点击加号之后可以在前面上传一张图片，可以显示缩略图的那种），添加图片后，当鼠...
就是点击加号可以添加一张图片上传会显示缩略图，并在缩略图后面还有加号可以继续添加图片（换言之在点击加号之后可以在前面上传一张图片，可以显示缩略图的那种），添加图片后，当鼠标hover在已上传的图片上时，可以进行删除操作的效果
求代码 展开
求代码 展开
2个回答
展开全部
function showImage(fileid,imgid,atagID){
var ext = "_0";
var thumb = $('img#'+imgid);
var litbox = $('a#'+atagID);
var img1path = document.getElementById("img1path");;
if($('.onTeedaError').length>0){
//img1path.value="";
}
var messages =document.getElementById("messages");
if(messages!=null){
//img1path.value="";
}
new AjaxUpload(fileid, {
action: '../../PdfChangeImgUploadServlet?pdfNameEnd=_PERT',
name: ext,
onSubmit: function(file, extension) {
extension=extension.toLowerCase();
if(extension=="pdf")
{
$("#photoError").hide();
$.blockUI({
message: $('span#displayBox'),
css: {
border: 'none',
width: '270px',
}
});
}else{
$("#photoError").show();
return false;
}
},
onComplete: function(file, response) {
$('.pdfImg').remove();
$('#pfont').hide();
$.unblockUI();
var res = eval('('+response+');');
var timestemp = new Date().getTime();
var srcStr = res['srcStr'];
$('#addImg').val(res['srcStr']);
var imgWidth = res['w'] + "px";
var imgHeight = res['h'] + "px";
$("#addImgWidth").val(imgWidth);
$("#addImgHeight").val(imgHeight);
var str = "";
var arr = [];
arr = srcStr.split(",");
$('#imgFile').attr("value",srcStr);
for(var i=0;i<arr.length;i++){
var jpgsrc = arr[i] + '?'+ timestemp;
if(i == 0){
str=str+"<a class=\"pdfImg\" style=\"margin-left:10px;\" href="+jpgsrc+" rel=\"lightbox"+timestemp+"\">";
str=str+"<img class=\"jpgImgFont\" src="+jpgsrc+" style=\"vertical-align:middle;cursor:pointer;width:"+ imgWidth +";height:"+ imgHeight +" \" />";
str=str+"</a>";
} else {
str=str+"<a class=\"pdfImg\" style=\"margin-left:10px;display:none;\" href="+jpgsrc+" rel=\"lightbox"+timestemp+"\">";
str=str+"<img class=\"jpgImgFont\" src="+jpgsrc+" style=\"vertical-align:middle;cursor:pointer;width:"+ imgWidth +";height:"+ imgHeight +" \" />";
str=str+"</a>";
}
}
$('#imgFontDiv').append(str);
//thumb.attr('src', res['src']+'?'+timestemp);
//litbox.attr('href', res['src']+'?'+timestemp);
lightbox.refresh();
$('.jpgImgFont').attr('style', 'width: ' + imgWidth + '; height: ' + imgHeight + ";" ).hide().fadeIn('slow');
if(res['img1path']!=""){
img1path.value=res['img1path'];
}
if (imgid == 'imgFont') {
document.getElementById("photoName").value=res['srcStr'].substring(res['srcStr'].lastIndexOf("/")+1);
}
//}
}
});
}
function goClearPhoto(textID,imgID,hrefID,photoName){
var _file = document.getElementById(textID);
if(_file.files)
{
_file.value = "";
}
else
{
if (typeof _file != "object")
{
return null;
}
var textID=document.getElementById(textID);
textID.value="";
var timestemp = new Date().getTime();
var src=document.getElementById("carPermitDefaultPath").value;
var thumb = $('img#'+imgID);
var litbox = $('a#'+hrefID);
thumb.attr('src',"/groupware/images/PdfSample.png");
thumb.attr('style', 'width:230px;height:240px;border:0px;vertical-align:middle;cursor:pointer;' ).hide().fadeIn('slow');
litbox.attr('href',"/groupware/images/PdfSample.png"+'?'+timestemp);
$('.pdfImg').remove();
litbox.show();
lightbox.refresh();
var photoName=document.getElementById(photoName);
photoName.value=null;
var imgFont= document.getElementById(imgFont);
imgFont.value = null;
}
$("#imgFile").val("");
$("#img1path").val("");
}
html:
<body onload="showImage('insUpdPermitPhoto','imgFont','pfont');>
<div style="margin-top:3px;margin-bottom:-8px">
<span class="sl-custom-file" style="">
<input type="text" id="img1path" placeholder="対応フォーマット：pdfのみ" readonly="true" class="input-height" style="width:260px;height:20px;"/>
<button class="btn btn-small" id="reference" type="button" style="margin-left:-2px;margin-top:-12px">
<span style="color:black;">参照</span>
</button>
<input type="file" id='insUpdPermitPhoto' class="fileTransIE10 ui-input-file" name="ufile" onChange="getValue(this,'img1path')" />
</span>
<a href="javascript:void(0)" onfocus="this.blur();" onClick="goClearPhoto('img1path','imgFont','pfont','photoName');" class="btn btn-small" style="margin-top:-15px;">
<span style="color:black;">削除</span>
</a>
</div>
后台用copy方法把图片复制到指定路径就可以了
var ext = "_0";
var thumb = $('img#'+imgid);
var litbox = $('a#'+atagID);
var img1path = document.getElementById("img1path");;
if($('.onTeedaError').length>0){
//img1path.value="";
}
var messages =document.getElementById("messages");
if(messages!=null){
//img1path.value="";
}
new AjaxUpload(fileid, {
action: '../../PdfChangeImgUploadServlet?pdfNameEnd=_PERT',
name: ext,
onSubmit: function(file, extension) {
extension=extension.toLowerCase();
if(extension=="pdf")
{
$("#photoError").hide();
$.blockUI({
message: $('span#displayBox'),
css: {
border: 'none',
width: '270px',
}
});
}else{
$("#photoError").show();
return false;
}
},
onComplete: function(file, response) {
$('.pdfImg').remove();
$('#pfont').hide();
$.unblockUI();
var res = eval('('+response+');');
var timestemp = new Date().getTime();
var srcStr = res['srcStr'];
$('#addImg').val(res['srcStr']);
var imgWidth = res['w'] + "px";
var imgHeight = res['h'] + "px";
$("#addImgWidth").val(imgWidth);
$("#addImgHeight").val(imgHeight);
var str = "";
var arr = [];
arr = srcStr.split(",");
$('#imgFile').attr("value",srcStr);
for(var i=0;i<arr.length;i++){
var jpgsrc = arr[i] + '?'+ timestemp;
if(i == 0){
str=str+"<a class=\"pdfImg\" style=\"margin-left:10px;\" href="+jpgsrc+" rel=\"lightbox"+timestemp+"\">";
str=str+"<img class=\"jpgImgFont\" src="+jpgsrc+" style=\"vertical-align:middle;cursor:pointer;width:"+ imgWidth +";height:"+ imgHeight +" \" />";
str=str+"</a>";
} else {
str=str+"<a class=\"pdfImg\" style=\"margin-left:10px;display:none;\" href="+jpgsrc+" rel=\"lightbox"+timestemp+"\">";
str=str+"<img class=\"jpgImgFont\" src="+jpgsrc+" style=\"vertical-align:middle;cursor:pointer;width:"+ imgWidth +";height:"+ imgHeight +" \" />";
str=str+"</a>";
}
}
$('#imgFontDiv').append(str);
//thumb.attr('src', res['src']+'?'+timestemp);
//litbox.attr('href', res['src']+'?'+timestemp);
lightbox.refresh();
$('.jpgImgFont').attr('style', 'width: ' + imgWidth + '; height: ' + imgHeight + ";" ).hide().fadeIn('slow');
if(res['img1path']!=""){
img1path.value=res['img1path'];
}
if (imgid == 'imgFont') {
document.getElementById("photoName").value=res['srcStr'].substring(res['srcStr'].lastIndexOf("/")+1);
}
//}
}
});
}
function goClearPhoto(textID,imgID,hrefID,photoName){
var _file = document.getElementById(textID);
if(_file.files)
{
_file.value = "";
}
else
{
if (typeof _file != "object")
{
return null;
}
var textID=document.getElementById(textID);
textID.value="";
var timestemp = new Date().getTime();
var src=document.getElementById("carPermitDefaultPath").value;
var thumb = $('img#'+imgID);
var litbox = $('a#'+hrefID);
thumb.attr('src',"/groupware/images/PdfSample.png");
thumb.attr('style', 'width:230px;height:240px;border:0px;vertical-align:middle;cursor:pointer;' ).hide().fadeIn('slow');
litbox.attr('href',"/groupware/images/PdfSample.png"+'?'+timestemp);
$('.pdfImg').remove();
litbox.show();
lightbox.refresh();
var photoName=document.getElementById(photoName);
photoName.value=null;
var imgFont= document.getElementById(imgFont);
imgFont.value = null;
}
$("#imgFile").val("");
$("#img1path").val("");
}
html:
<body onload="showImage('insUpdPermitPhoto','imgFont','pfont');>
<div style="margin-top:3px;margin-bottom:-8px">
<span class="sl-custom-file" style="">
<input type="text" id="img1path" placeholder="対応フォーマット：pdfのみ" readonly="true" class="input-height" style="width:260px;height:20px;"/>
<button class="btn btn-small" id="reference" type="button" style="margin-left:-2px;margin-top:-12px">
<span style="color:black;">参照</span>
</button>
<input type="file" id='insUpdPermitPhoto' class="fileTransIE10 ui-input-file" name="ufile" onChange="getValue(this,'img1path')" />
</span>
<a href="javascript:void(0)" onfocus="this.blur();" onClick="goClearPhoto('img1path','imgFont','pfont','photoName');" class="btn btn-small" style="margin-top:-15px;">
<span style="color:black;">削除</span>
</a>
</div>
后台用copy方法把图片复制到指定路径就可以了
追问
能不能解释一下这个是什么，
追答
上传完图片显示图片的名字用的，如果你不需要可以不用，主要看看js，这个input不是重点~多写了这个是当时我为了改样式没什么这个不影响什么的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你可以使用jquery的一个插件uploadify，官网下载http://www.uploadify.com/
使用示例http://www.cnblogs.com/babycool/archive/2012/08/04/2623137.html
使用示例http://www.cnblogs.com/babycool/archive/2012/08/04/2623137.html
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
