Ajax基于iframe文件上传

来源：互联网发布：php函数strip tags 编辑：程序博客网时间：2024/06/04 19:39

关于Ajax的文件上传我在网上查找了一些方法，一种方法用的是使用javascript读取客户端的文件内容并将其封装在HTTP的协议中，然后再上传给服务器，但我认为这样的做法对于用户来说是不安全的。于是查了一些相关的书，幸运的在《Ajax完全手册》找到了一个基于HTML标签<iframe>的文件上传方法，特此总结希望能对阅读的你有帮助：

总体的思想是将上传后的信息在页面是的iframe标签内显示,即将form表单的target属性设为iframe的name值,这样服务端的信息就反馈在了页面上的iframe内，实现了局部的刷新上传。

对应的HTML源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>弹出窗体</title></head><body style="position:absolute; z-index:0; margin:0; padding:0; width:100%; height:100%;"><mce:script type="text/javascript"></mce:script><div id="breakDiv" style="filter:alpha(opacity=40); position:absolute; top:0px; left:0px; z-index:6; display:none; background-color:#000;"></div><div id="login" style="position:absolute; z-index:10; width:271px; height:122px; text-align:center; border:#00C solid 1px; display:none; background-color:#FFF;"> <div id="title" style="font-family:'微软雅黑', '宋体'; font-size:18px; background-color:#03F; color:#FFF; width:271px; height:25px;"> <div style="float:left; width:200px; font-family:Verdana, Geneva, sans-serif; font-weight:bold; "> 文件上传</div> <input type="button" style="color:#C00; border:solid 1px #9C0; float:right; width:30px; background-color:#03F;" onclick="closeWindows();" value="X" /> </div> <div id="form" style="width:230px; padding-top:20px; margin-top:20px; margin:0 auto;"> <form action="http://localhost:8080/Ajax/uploadImage.jsp" method="post" enctype="multipart/form-data" target="uploadInfo"> <input type="file" name="uploadFile" /><br /><br /> <input type="submit" value="上传"/> <input type="button" value="取消" onclick="closeWindows();" /> </form> </div></div><input type="button" onclick="showWindows();" value="单击" /><iframe name="uploadInfo" scrolling="no" width="100%" height="20%" frameborder="0" onload="uploadFile();"></iframe></body></html>

对应的服务器上传处理这里用jsp中的servlet处理,源码如下：

package servlet;import javax.servlet.*;import javax.servlet.http.*;import java.io.*;public class ImgUploadServlet extends HttpServlet{//编码中文public String codeToString(String str){try{byte[] buf=str.getBytes("ISO-8859-1");return new String(buf);}catch(Exception e){e.printStackTrace();}return null;}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{request.setCharacterEncoding("utf-8");String tempFilePath=getServletContext().getRealPath("/")+"/tempFile.tmp";String tempFileName=new String(tempFilePath);File tempFile=new File(tempFileName);if(!tempFile.exists()) tempFile.createNewFile();byte[] buf=new byte[1000];FileOutputStream writer=new FileOutputStream(tempFile);//得到用户提交的流InputStream fileSource=request.getInputStream();//将用户提交的流写入临时文件中int n;while((n=fileSource.read(buf))!=-1) writer.write(buf, 0, n);fileSource.close();writer.close();//解析所读到的文件内容,为只读模式RandomAccessFile randAccessFile=new RandomAccessFile(tempFile, "r");//读取文件的第一行，为一个分隔符randAccessFile.readLine();//读取第二行数据，这行包含了上传文件的文件名和路在客户端的路径信息String fileInfo=randAccessFile.readLine();//处理得到文件名并进行编码转换int index=fileInfo.lastIndexOf('//');String filename=codeToString(fileInfo.substring(index+1, fileInfo.length()-1));//重新定位读取文件指针到文件的开头randAccessFile.seek(0);//得到第4行回车符的位置，这是上传文件正真内容的开始位置int forth=1;long forthEntherPosition=0;while((n=randAccessFile.readByte())!=-1&&(forth<=4)) if(n=='/n') { forthEntherPosition=randAccessFile.getFilePointer(); forth++; } //得到倒数第3行回车符的位置，为上传文件内容的结束位置randAccessFile.seek(randAccessFile.length());long endPosition=randAccessFile.getFilePointer();int j=1;while(endPosition>=0&&(j<=3)){endPosition--;randAccessFile.seek(endPosition);if(randAccessFile.readByte()=='/n') j++;}//保存解析后的上传文件的内容String savePath=getServletContext().getRealPath("/")+"/"+filename;File saveFile=new File(savePath);if(!saveFile.exists()) saveFile.createNewFile();RandomAccessFile writerFile=new RandomAccessFile(saveFile, "rw");randAccessFile.seek(forthEntherPosition);long startPoint=randAccessFile.getFilePointer();while(startPoint<endPosition){writerFile.write(randAccessFile.readByte());startPoint=randAccessFile.getFilePointer();}writerFile.close();randAccessFile.close();tempFile.delete(); //删除临时文件response.setHeader("Cache-Control","no-cache"); response.setHeader("Pragma", "on-cache"); response.setContentType("HTTP/1.1 204 NO Content/n/n"); response.setContentType("text/html; charset=UTF-8"); PrintWriter out=response.getWriter(); out.println(filename+"上传成功！");}}

这里得到的是用户上传请求的流，而直接得到的流还包含了HTTp协议中的一些信息。我在这个过程中得到的临时文件的形式如：

-----------------------------7db2ee1b100318Content-Disposition: form-data; name="没有后缀的文件名"; filename="文件在客户端的绝对文件名（含路径）"Content-Type: MIME的类型"文件的正真内容"-----------------------------7db2ee1b100318--

故要一定的处理后才能得到真正的上传文件内容。

在这里如果想更加清楚HTTP的协议交互过程信息，建议可用HttpWatch这个工具,它可以记录浏览器发送和接收的HTTP协议，非常方便Ajax的学习！

如上文章如有问题，欢迎批评指出！