java 使用 AjaxUpload.js 实现上传文档的时候需要注意哪些？
java使用AjaxUpload.js实现上传文档的时候需要注意哪些？我跟我的同事的差不多，但是就是无法上传，连选择文件的弹窗都不出来。下面是jsp内容：<title>修...
java 使用 AjaxUpload.js 实现上传文档的时候需要注意哪些？ 我跟我的同事的差不多，但是就是无法上传，连选择文件的弹窗都不出来。下面是jsp内容：
<title>修改页面</title>
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.4.3/themes/gray/easyui.css"/>
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.4.3/themes/icon.css"/>
<script type="text/javascript" src="${ctx}/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${ctx}/js/ajaxupload.3.6.js"></script>
<script type="text/javascript" src="${ctx}/js/common.js"></script>
<script type="text/javascript" src="${ctx}/js/layer/layer.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.form.js"></script>
<script src="${ctx}/js/dateFormat.js"></script>
</head>
<body>
<div id="index_6" style="margin-top: 10px;">
<label>上传文档*:</label>
<div style="margin-top: 10px;">
<button id="upfile" onclick="uploadFile(this)" class="upload-file">上传作答文件</button>
<span id="upshow" class="upload-show" style="left: 72px;display: none">
</span>
</div>
<div id="up-loading" class="upload-loading" style="display: none">
<div style="float: left"><img src='${ctx}/images/show.gif' /></div>
<div class="upload-answer-loading"><span>正在上传，请稍后...</span></div>
</div>
<input id="file" name="file" type="hidden" value=""/> //这个name的值跟实体类中的一致
</div>
function uploadFile(button) {
alert("++++++++++"+button);
new AjaxUpload(button,{
action: '${ctx}/test/upload22',
name: 'upload',
id:'upfile',
onComplete:function (file,response) {
alert("上传文档完毕");
var resule=eval("("+response+")");
if(resule.flag==true){
fileName = result.fileOldName;
fName = "<span>"+fileName+"</span>";
$("#file").val(result.relPath);
$("#upshow").html(fName);
$("#up-loading").hide();
$("#upshow").show();
}else{
parent.layer.alert("上传失败",{icon: 2, title:'提示'});
}
this.enable();
} 展开
<title>修改页面</title>
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.4.3/themes/gray/easyui.css"/>
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.4.3/themes/icon.css"/>
<script type="text/javascript" src="${ctx}/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${ctx}/js/ajaxupload.3.6.js"></script>
<script type="text/javascript" src="${ctx}/js/common.js"></script>
<script type="text/javascript" src="${ctx}/js/layer/layer.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.form.js"></script>
<script src="${ctx}/js/dateFormat.js"></script>
</head>
<body>
<div id="index_6" style="margin-top: 10px;">
<label>上传文档*:</label>
<div style="margin-top: 10px;">
<button id="upfile" onclick="uploadFile(this)" class="upload-file">上传作答文件</button>
<span id="upshow" class="upload-show" style="left: 72px;display: none">
</span>
</div>
<div id="up-loading" class="upload-loading" style="display: none">
<div style="float: left"><img src='${ctx}/images/show.gif' /></div>
<div class="upload-answer-loading"><span>正在上传，请稍后...</span></div>
</div>
<input id="file" name="file" type="hidden" value=""/> //这个name的值跟实体类中的一致
</div>
function uploadFile(button) {
alert("++++++++++"+button);
new AjaxUpload(button,{
action: '${ctx}/test/upload22',
name: 'upload',
id:'upfile',
onComplete:function (file,response) {
alert("上传文档完毕");
var resule=eval("("+response+")");
if(resule.flag==true){
fileName = result.fileOldName;
fName = "<span>"+fileName+"</span>";
$("#file").val(result.relPath);
$("#upshow").html(fName);
$("#up-loading").hide();
$("#upshow").show();
}else{
parent.layer.alert("上传失败",{icon: 2, title:'提示'});
}
this.enable();
} 展开
2个回答
展开全部
ajax是无法提交文件的，所以在上传图片并预览的时候，我们经常使用Ifame的方法实现看似异步的效果。但是这样总不是很方便的，AjaxFilleUpload.js对上面的方法进行了一个包装，使得我们不用去管理Iframe的一系列操作，也不用影响我们的页面结构，实现异步的文件提交。
html:
复制代码 代码如下:
<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />
js:
复制代码 代码如下:
$.ajaxFileUpload({
url:'${pageContext.request.contextPath}/Manage/BR_restorePic.action', //需要链接到服务器地址
secureuri:false,
fileElementId:'file_upload', //文件选择框的id属性
dataType: 'text', //服务器返回的格式，可以是json、xml
success: function (data, status) //相当于java中try语句块的用法
{
$('#restoreDialog').html(data);
//alert(data);
},
error: function (data, status, e){ //相当于java中catch语句块的用法
$('#restoreDialog').html("上传失败，请重试");
}
});
这个方法还会出现一个问题，就是input只能使用一次的问题，input第二次的onchange将不会被执行，这应该是与浏览器的有关，解决办法就是替换这个input
像这样：
复制代码 代码如下:
$('#file_upload').replaceWith('<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />');
html:
复制代码 代码如下:
<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />
js:
复制代码 代码如下:
$.ajaxFileUpload({
url:'${pageContext.request.contextPath}/Manage/BR_restorePic.action', //需要链接到服务器地址
secureuri:false,
fileElementId:'file_upload', //文件选择框的id属性
dataType: 'text', //服务器返回的格式，可以是json、xml
success: function (data, status) //相当于java中try语句块的用法
{
$('#restoreDialog').html(data);
//alert(data);
},
error: function (data, status, e){ //相当于java中catch语句块的用法
$('#restoreDialog').html("上传失败，请重试");
}
});
这个方法还会出现一个问题，就是input只能使用一次的问题，input第二次的onchange将不会被执行，这应该是与浏览器的有关，解决办法就是替换这个input
像这样：
复制代码 代码如下:
$('#file_upload').replaceWith('<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />');
追问
我这个不是ajax提交文件，用的是ajaxupload.js 插件
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
