jQuery:对上传文件进行操作

得来..

其实是从昨天的问题引申而来,因为昨天的例子只判断了文件选择是否为空.在当前网络环境下,这显然是不行的…于是今天对代码进行了整理.增加了[文件大小]、[文件后缀]的判断.

对于JavaScript的File的操作,可以参考:地址

html

源码

注意:如果在页面中直接引入iframe,必须给其css设置height属性,否则将影响后面内容的展示.iframe标签不能简写:错误的[<iframe />]!正确写法:[<iframe>lt;/iframe>]

/*
*:此处必须使用live进行事件绑定.
因为在118行中,使用了[fileinput.remove();]对元素进行删除.

*/
$("#file").live("change",function () {
if($.trim($(this).val())==''){//为空的时候不要继续判断.
return false;
}
var filepath = $(this).val();
var extStart = filepath.lastIndexOf(".");
var fileExt = filepath.substring(extStart, filepath.length).toUpperCase();
if ((fileExt != ".BMP" && fileExt != ".PNG" && fileExt != ".fileExt" && fileExt!= ".JPG" && fileExt != ".JPEG") && ((fileExt != ".PDF" && fileExt != ".DOC" && fileExt != ".DOCX"))) {
top.layer.msg("图片限于bmp,png,gif,jpeg,jpg格式,文档仅限于pdf,Word文档格式");
$("#upload").prop("disabled",true);
}else{
var file_size = 0;
if ($.browser.msie) {
var img = new Image();
img.src = filepath;
if (img.fileSize > 0) {
if (img.fileSize > 10240) {
top.layer.msg('文件大小不能超过10M,请重新选择!');
$("#upload").prop("disabled",true);
}else{
top.layer.msg("文件大小符合要求!");
$("#upload").prop("disabled",false);
}
}
} else {
file_size = this.files[0].size;
var size = file_size / 1024;
if (size > 10240) {
top.layer.msg("文件大小不能超过10M,请重新选择!");
$("#upload").prop("disabled",true);
}else{
if($("#upload").prop("disabled")){
top.layer.msg("文件符合要求!");
}
$("#upload").prop("disabled",false);
}
}
}
});

下面是完整文件,上面一部分则是单独判断的函数:

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<title>文件上传</title>
<meta name="decorator" content="default"/>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript" src="/jquery/jquery.form.js"></script>
<script type="text/javascript" src="/layer/layer.js"></script>
<script type="text/javascript">
<c:if test="${empty list }">
$(document).ready(function() {

/*
*:此处必须使用live进行事件绑定.
因为在118行中,使用了[fileinput.remove();]对元素进行删除.

*/
$("#file").live("change",function () {
if($.trim($(this).val())==''){//为空的时候不要继续判断.
return false;
}
var filepath = $(this).val();
var extStart = filepath.lastIndexOf(".");
var fileExt = filepath.substring(extStart, filepath.length).toUpperCase();
if ((fileExt != ".BMP" && fileExt != ".PNG" && fileExt != ".fileExt" && fileExt!= ".JPG" && fileExt != ".JPEG") && ((fileExt != ".PDF" && fileExt != ".DOC" && fileExt != ".DOCX"))) {
top.layer.msg("图片限于bmp,png,gif,jpeg,jpg格式,文档仅限于pdf,Word文档格式");
$("#upload").prop("disabled",true);
}else{
var file_size = 0;
if ($.browser.msie) {
var img = new Image();
img.src = filepath;
if (img.fileSize > 0) {
if (img.fileSize > 10240) {
top.layer.msg('文件大小不能超过10M,请重新选择!');
$("#upload").prop("disabled",true);
}else{
top.layer.msg("文件大小符合要求!");
$("#upload").prop("disabled",false);
}
}
} else {
file_size = this.files[0].size;
var size = file_size / 1024;
if (size > 10240) {
top.layer.msg("文件大小不能超过10M,请重新选择!");
$("#upload").prop("disabled",true);
}else{
if($("#upload").prop("disabled")){
top.layer.msg("文件符合要求!");
}
$("#upload").prop("disabled",false);
}
}
}
});

$(".deletefile").live("click",function(){
var delid = $(this).data("id");
var buttondel = $(this);
if(delid){
//询问框
top.layer.confirm('确认要删除吗?', {
btn: ['确认','取消'] //按钮
}, function(index){
top.layer.close(index);
$.ajax({
url:"/deleteFile",
data:{
"fileId":delid
},
type:"POST",
dataType:"json",
success:function(data){
if(data.status && data.status=='0'){
var idStr = $("#resultIdInfo").val();
idStr = idStr.substring(0,idStr.length-1);
var array = idStr.split(",");
var indexarray = array.indexOf(delid);
if (indexarray > -1) {
array.splice(indexarray, 1);
}
$("#resultIdInfo").val("");
if(array.length>0){
$("#resultIdInfo").val(array.join(",")+",");
}
buttondel.parent().parent().remove();//删除当前行.
}
}
});

});
}

})

$("#upload").click(function(){
var fileinput=$("#file");
if($.trim(fileinput.val())==''){
top.layer.msg('请先选择文件!');
return false;
}
$("#uploadForm").ajaxSubmit({
type: "post",
url: $("#uploadForm").attr("action"),
success: function (data) {
if(data.status && data.status=='0'){//成功.
var objinfo = data.result;
if(!checkIdRepeat(objinfo.id)){
var resultValue = $("#resultIdInfo");
resultValue.val(resultValue.val()+objinfo.id+",");
$("#fileInfoTable").append(generatorTrHTML(objinfo.id,objinfo.displayName));
}
fileinput.after(fileinput.clone().val(""));//复制一个新的file.
fileinput.remove();//删除原有文件域.因为如果需要为文件域绑定事件,必须使用live..
}else{
top.layer.msg(data.msg);
}
},
error: function (msg) {
top.layer.msg("文件上传失败!"+msg);
}
});
return false;

})
});

//拼接html.
function generatorTrHTML(id,name){
var html = "<tr id='"+id+"'><td>"+name+"</td><td><input type='button' data-id='"
+id+"' class='btn btn-danger deletefile' value='删除'/></td><td><input type='button' onclick='window.open(\"/viewfile/"+id+"\")' class='btn btn-primary' value='下载'/></td></tr>";

return html;
}

// 检查是否已经存在ID了.
function checkIdRepeat(fileid){
var resultValue = $("#resultIdInfo").val();
if(resultValue && resultValue.indexOf(fileid)>0){
return true;
}
return false;
}
</c:if>
</script>
</head>
<body>
<form:form id="uploadForm" enctype="multipart/form-data" modelAttribute="document" action="/saveFile" method="post" class="breadcrumb form-search ">
<c:if test="${empty list and empty see}">
<input id="fileUploadType" name="fileUploadType" type="hidden" value="${fileUploadType}"/>
<input type="text" id="txt" name="txt" class="input">&nbsp;&nbsp;<input type="button" onmousemove="file.style.pixelLeft=event.x-60;file.style.pixelTop=this.offsetTop;" value="浏览" size="30" onclick="file.click()" class="btn btn-primary">
<input type="file" id="file" onchange="txt.value=this.value" name="file" style="height:26px;" class="files" size="1" hidefocus>
<input type="button" id="upload" class="btn btn-warning" <c:if test="${empty fileUploadType}">disabled="disabled"</c:if> value="上传"/><c:if test="${empty fileUploadType}"><span>文件上传类型为空,暂时不能上传!</span></c:if>
<input type="hidden" id="resultIdInfo" />
</c:if>
</form:form>
</body>
</html>

到此.

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据