js/jquery上传图片的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js/jquery上传图片的问题相关的知识，希望对你有一定的参考价值。
就是点击加号可以添加一张图片上传会显示缩略图，并在缩略图后面还有加号可以继续添加图片（换言之在点击加号之后可以在前面上传一张图片，可以显示缩略图的那种），添加图片后，当鼠标hover在已上传的图片上时，可以进行删除操作的效果
求代码
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不是重点~多写了这个是当时我为了改样式没什么这个不影响什么的
参考技术A 你可以使用jquery的一个插件uploadify，官网下载http://www.uploadify.com/使用示例http://www.cnblogs.com/babycool/archive/2012/08/04/2623137.html
异步上传图片，光用jquery不行，得用jquery.form.js插件
异步上传图片，光用jquery不行，得用jquery.form.js插件，百度一下下载这个插件，加jquery，引入就可以了
<form id="postbackground" method="POST" action="#" enctype="multipart/form-data">
<input name="upload" type="file" id="upload" >
</form>
<input class="handin_bt" type="submit" id="uploadok" value="上传"></td>
$("#uploadok").on("click",function(){
$("#postbackground").ajaxForm({
type:‘post‘,
url:‘index.php?controller=testimg&action=TemplateUpload‘,
dataType: ‘json‘,
success:function(data){
console.log(data.url);
},
error:function(XmlHttpRequest,textStatus,errorThrown){
console.log(XmlHttpRequest);
}
});
});
以上是关于js/jquery上传图片的问题的主要内容，如果未能解决你的问题，请参考以下文章
jquery.uploadify.js修改时，怎么判断上传了几张图片