今天看到不错的一段代码,做上传的,当选择文件后,自动出现一个旋转的图标(当然可以换成文字),上传用AJAX完成的,上传后出现另外的图标,
下面代码笔记之
首先是前台,要引入jquery和ajaxupload.js两个JS
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ajaxupload.3.5.js"></script>
<script type="text/javascript">
var uploadIndex = 1;
$(function() {
uploadIt();
deleteFile();
});
function uploadIt() {
$(".uploadAndNext").click(function() {
var uploadId = "#" + $(this).attr("id");
var btn = $(this);
new AjaxUpload( uploadId + "" , {
action : "UploadServlet" ,
onChange: function(file, extension){
$(uploadId + "").parent().find("input")[0].value = file;
$(uploadId + "").parent().find(".uploadAndOkImg").show().attr("src" , "images/spinner.gif");
btn.attr("disabled" , "disabled");
},
onComplete: function(file, response) {
$(uploadId + "").parent().find(".uploadAndOkImg").attr("src" , "images/ok.gif");
$(uploadId + "").parent().find(".deleteImg").attr("src" , "images/delete.gif").show();
uploadIndex++;
$("#uploaddiv").append("<div><input type='text' /><button class='uploadAndNext' id='upload" + uploadIndex + "'>浏览</button><img src='' width='20px' height='20px' class='uploadAndOkImg' style='display:none'/><img src='' width='20px' height='20px' class='deleteImg' style='display:none' alt='删除'/></div>");
uploadIt();
deleteFile();
}
});
});
}
function deleteFile() {
$("#uploaddiv .deleteImg").click(function() {
var fileName = $(this).parent().find("input").val();
var thisObj = $(this);
$.post("DeleteServlet" , {
"fileName" : fileName
},
function(data) {
thisObj.parent().remove();
}
);
});
}
</script>
</head>
<body>
<div id="uploaddiv">
<div><input type="text" /><button class="uploadAndNext" id="upload1">浏览</button><img src="" width="20px" height="20px" class="uploadAndOkImg" style="display: none"/><img src="" width="20px" height="20px" class="deleteImg" style="display:none;" alt="删除"/></div>
</div>
</body>
然后通过servlet去处理,就是调用那个commons.fileupload组件了
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
try {
List<FileItem> list = upload.parseRequest(request);
for (int i = 0; i < list.size(); i++) {
FileItem fileItem = list.get(i);
String name = fileItem.getName().substring(fileItem.getName().lastIndexOf("\\") + 1);
request.getSession().setAttribute(name, true);
fileItem.write(new File("d:/" + name));
}
} catch (FileUploadException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
