使用ajaxfileupload.js异步上传文件到Servlet

前段时间帮同学做的毕业设计。。好吧又是帮人做。。。需要上传文件，在这里使用了ajaxfileupload.js进行异步的上传文件到Servlet ，后台保存了文件以后通过JSON返回文件路径到前端，好了废话不多说，直接上代码了。。。

前端页面比较简单

     <input maxlength=16 type=file name="pic" id="pic" size=16 />

     <input type="button"  id="uploadBut" onclick = "ajaxFileUpload()" value="上传" />

一个表单里面放input就可以了。。注意type是file类型的。。使用ajaxfileupload.js必须先引入jquery.js 然后再引入ajaxfileupload.js 。。。

    <script type="text/javascript" src="js/jquery.js"></script>  
    <script type="text/javascript" src="js/ajaxfileupload.js"></script>

选择了文件以后电击上传触发ajaxFileUpload事件

 function ajaxFileUpload() {  

            $.ajaxFileUpload({  
                url : 'UploadServlet',// servlet请求路径  
                secureuri : false,  
                fileElementId : 'pic',// 上传控件的id  
                dataType : 'json',
                success : function(data)
                {
                alert(data.msg);
                alert("文件路径："+data.filePath);
                document.getElementById("imagePath").value= data.filePath;
                }  
            })  
            return false;  
        }

前端就是这样了。。接下来是Servlet接收流进行文件的保存。。。

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

        //从request当中获取流信息
InputStream fileSource = request.getInputStream();
String tempFileName = "C:/tempFile";
//tempFile指向临时文件
File tempFile = new File(tempFileName);
//outputStram文件输出流指向这个临时文件
FileOutputStream outputStream = new FileOutputStream(tempFile);
byte b[] = new byte[2 * 1024];
int n;
while(( n = fileSource.read(b)) != -1){
outputStream.write(b, 0, n);
}
//关闭输出流、输入流
outputStream.close();
fileSource.close();

//获取上传文件的名称
RandomAccessFile randomFile = new RandomAccessFile(tempFile,"r");
randomFile.readLine();
String str = randomFile.readLine();
System.out.println(str);

int endIndex = str.lastIndexOf("\"");
String beginStr = str.substring(0,endIndex);
int beginIndex = beginStr.lastIndexOf("\"") +1;
String filename = beginStr.substring(beginIndex, beginStr.length());

System.out.println("filename:" + filename);

//重新定位文件指针到文件头
randomFile.seek(0);
long startPosition = 0;
int i = 1;
//获取文件内容 开始位置
while(( n = randomFile.readByte()) != -1 && i <=4){
if(n == '\n'){
startPosition = randomFile.getFilePointer();
i ++;
}
}
startPosition = randomFile.getFilePointer() -1;
//获取文件内容 结束位置
randomFile.seek(randomFile.length());
long endPosition = randomFile.getFilePointer();
int j = 1;
while(endPosition >=0 && j<=2){
endPosition--;
randomFile.seek(endPosition);
if(randomFile.readByte() == '\n'){
j++;
}
}
endPosition = endPosition -1;

//设置保存上传文件的路径
String realPath = getServletContext().getRealPath("/") + "images";
File fileupload = new File(realPath);
if(!fileupload.exists()){
fileupload.mkdir();
}
File saveFile = new File(realPath,filename);
RandomAccessFile randomAccessFile = new RandomAccessFile(saveFile,"rw");

//从临时文件当中读取文件内容（根据起止位置获取）
randomFile.seek(startPosition);
while(startPosition < endPosition){
randomAccessFile.write(randomFile.readByte());
startPosition = randomFile.getFilePointer();
}
//关闭输入输出流、删除临时文件
randomAccessFile.close();
randomFile.close();
tempFile.delete();
System.out.println(saveFile.toString());
PrintWriter writer = response.getWriter();
writer.print(" { ");
writer.print(" \"success\" : \"true\" ,\"msg\" : \"上传成功！ \", \"filePath\" : \"images/" +filename+" \" ");
writer.print(" } ");
writer.close(); 

}

这样就实现了异步上传文件的功能咯。。。小伙伴们可以去试试看。。。当然后台接收文件的方式还有其他的，可以使用其他的方法大家可以试试看。这里我就不再去试咯。。。

秒客网

使用ajaxfileupload.js异步上传文件到Servlet

相关文章