怎么用ajax 提交上传的文件上传后在界面显示出来。但界面不刷新
发布网友
发布时间:2022-05-10 05:53
我来回答
共2个回答
热心网友
时间:2022-05-15 02:32
1. 页面加入隐藏iframe,假如name=xxxx
2. form的target设置成xxxx
3. 后台上传图片后,向前端输出一个函数如:parent.yourfunc('图片url')
4. 页面上定义yourfunc函数,参数为url
5. 图片上传完成后,会调用yourfunc函数
6. 在yourfunc中拿到url,下步你该知道怎么做了吧
热心网友
时间:2022-05-15 03:50
不知道你是 临时预览图片还是实际是上传了。
如果是临时预览的话,给你提供一个方法。
//预览图片
function lookimg(upfile){
if (navigator.userAgent.indexOf("MSIE") > 0) {
try {
if (!upfile.value.match(/.jpg|.gif|.jpeg|.png|.bmp/i)) {
alert('请上传.jpg|.gif|.jpeg|.png类型的图片');
return false;
}
var objPreview = document.getElementById("img_"+upfile.id);
var objPreviewFake = document.getElementById('result_'+upfile.id);
objPreview.src = upfile.value;
objPreview.onreadystatechange = function(){
if(objPreview.readyState == "complete"){
if(objPreview.fileSize>1024*1024){
alert('文件超过1MB');
return false;
}
}
}
if (objPreviewFake.filters) {
upfile.select();
var imgSrc = document.selection.createRange().text;
objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
objPreviewFake.style.width = 180 + 'px';
objPreviewFake.style.height = 180 + 'px';
objPreview.style.display = "none";
upfile.blur();
$('#result_'+upfile.id).css('display','block').css('margin-bottom','-25px');
}
} catch (ex) {}
}else if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { //FireFox浏览器
if (!upfile.value.match(/.jpg|.gif|.jpeg|.png|.bmp/i)) {
alert('请上传.jpg|.gif|.jpeg|.png类型的图片');
return false;
}
var o = document.getElementById(upfile.id);
var p = document.getElementById("img_"+upfile.id);
if(o.files[0].fileSize>1024*1024){
alert('文件超过1MB');
return false;
}
p.src = o.files[0].getAsDataURL();
//p.style.display = "block";
}
$('#upload_'+upfile.id).attr('disabled','');
}
html:
<img style=" height:85px; width:95px" id="img_f0" src="/images/nopic.jpg">
<br><br>
<input type="button" class="yy_but" id="file" value="上传logo">
<input type="file" hidefocus="" onchange="lookimg(this)" onmouseover="javascript:$('#f0').css('cursor','pointer');" size="4" name="thumb" id="f0" style="cursor: pointer;">
如果是真的上传了,那就结合flash做。