怎么用ajax 提交上传的文件上传后在界面显示出来。但界面不刷新

Posted 2023-03-29

上传图片的后 但整个界面不刷新。仅仅图片哪个部门刷新。有什么比较详细的办法么！
我现在使用的是from 提交。提交后整个界面都刷新 所以想办法不是整个刷新界面。速度来。处理整个问题已经快1周了
我要的是ajax 提交。 你这个是隐藏表单 提交 。这个我用过。后续解决不了。没提交后的结果提示

参考技术A 1. 页面加入隐藏iframe，假如name=xxxx
2. form的target设置成xxxx
3. 后台上传图片后，向前端输出一个函数如：parent.yourfunc('图片url')
4. 页面上定义yourfunc函数，参数为url
5. 图片上传完成后，会调用yourfunc函数
6. 在yourfunc中拿到url，下步你该知道怎么做了吧追问

用了。后台上传图片后是不刷新了。而且显示了图片但没提示。 前端输出一个函数parent.yourfunc("图片url")是干什么的 有qq没聊下

追答

回调函数，调用父窗口函数，用于传送图片url到父页面上供你处理。

追问

提交后隐藏表单 里面是这样的一个提示。但我主窗口 没任何提示怎么处理

追答

以上iframe里面的内容是后台输出的。

现在要实现你需要的功能，需要后台配合来做，在你的主页面定义好一个函数如 yourfunc，
后台处理完数据后，输出parent.yourfunc('图片url')，就ok了，到时候会自动调用yourfunc

如果你不能要求修改后台的话，那就没有办法了

本回答被提问者采纳 参考技术B 不知道你是 临时预览图片还是实际是上传了。
如果是临时预览的话，给你提供一个方法。
//预览图片
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做。

ajax上传文件提交时，enctype=multipart/form-data怎么带过去？

急急急。大虾们。ajax上传文件提交时，enctype=multipart/form-data怎么带过去？我是在上传图片。ajax上传完之后还要返回本页面见图片显示出来。

目前的情况下，没有直接ajax提交file的可能
有一些js库你可以使用，他们做的方法往往是在页面新建一个iframe，然后在frame里面建一个file的input组件，然后在那个frame里面走submit
这样就做成了异步的样子，submit那个的form你就可以设置enctype了 参考技术A

form中的字段，加上get set方法        

private FormFile file;

private String filename;

private String filesize;

action 部分:

public ActionForward execute(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response)

throws Exception

String dir="D:/";

UpFileForm uff=(UpFileForm)form;

FormFile file=uff.getFile();

if(file.getFileSize()==0)

return mapping.findForward("success");

String fname=file.getFileName();

String size=Integer.toString(file.getFileSize())+"bytes";

InputStream streamIn=file.getInputStream();

OutputStream streamOut=new FileOutputStream(dir+"/"+fname);

int bytesRead=0;

byte[] buffer=new byte[8192];

while((bytesRead=streamIn.read(buffer,0,8192))!=-1)

streamOut.write(buffer,0,bytesRead);

streamOut.close();

streamIn.close();

uff.setFilename(fname);

uff.setFilesize(size);

file.destroy();

return mapping.findForward("success");

这样将上传的文件存在d盘。