<head>
<title>ajaxFileUpload文件上传例子</title>
<script type="text/javascript" src="<%=baseURL%>/kinth/js/ajaxfileupload.js"></script>
<script type="text/javascript">
var flag=0 //flag作用：分两种情况提交信息，如果是修改 *** 作，没有修改上传文件，只修改其他字段的信息时点保存也能提交信息
function uploadFile(){
$.ajaxFileUpload({
url:baseURL+ "/fileCatalog.do?method=save", //需要链接到服务器地址
secureuri:true,
fileElementId:'file', //文件选择框的id属性
success: function(data, status){
var results = $(data).find('body').html()
var obj = eval("("+results+")")
$("#fileSize").val(obj.fileSize)
$("#fileUrl").val(obj.fileUrl)
$('#fileCatalogForm').submit()
},error: function (data, status, e){
showDialogWithMsg('ideaMsg','提示','文件错误！')
}
})
}
function getFileName(obj)
{
flag=1
var pos = -1
if(obj.value.indexOf("/") > -1){
pos = obj.value.lastIndexOf("/")*1
}else if(obj.value.indexOf("\\") > -1){
pos = obj.value.lastIndexOf("\\")*1
}
var fileName = obj.value.substring(pos+1)
$("#fileName").val(fileName)
$('.files').text(fileName)
}
function ev_save(){
if(submitMyForm('fileCatalogForm')){
if(flag==0){
$('#fileCatalogForm').submit()
}else{
uploadFile()
}
}
}
function ev_back(){
window.location.href=baseURL+'/fileCatalog.do?method=list'
}
</script>
</head>
<body>
<html:form styleId="fileCatalogForm" action="/fileCatalog.do?method=save&fileFlag=true" method="post" enctype="application/x-www-form-urlencoded" style="text-align:left">
<table>
<tr>
<td>附件上传：</td>
<td style="text-align:left" id="fileTd">
<input type="file" name="file" id="file" onChange="getFileName(this)" /><br />
</td>
<td colspan="2" class="tdr">
<ol class=files>
<c:if test="${entity.resourceId != null && entity.resourceId != ''}"><li> ${entity.fileName}  上传成功</li></c:if>
</ol>
</td>
</tr>
<c:if test="${entity.resourceId == null || entity.resourceId == ''}">
<input type="text" name="fileSize" id="fileSize" >
</c:if>
<input type="hidden" id="fileUrl" name="fileUrl" value="${entity.fileUrl}"
</table>
</html:form>
</body>
点评：点击a标签实现d出input file上传文件对话框，html、css、如下感兴趣的朋友可以参考下哈，希望对你有所帮助html复制代码代码如下:<SPAN class=tag<<SPAN class=titlediv</SPAN</SPAN<SPAN class=tag<<SPAN class=titlea</SPAN <SPAN class=attributehref</SPAN=<SPAN class=value"###"</SPAN</SPAN添加图片<SPAN class=tag</<SPAN class=titlea</SPAN</SPAN
<SPAN class=tag<<SPAN class=titleinput</SPAN <SPAN class=attributetype</SPAN=<SPAN class=value"file"</SPAN <SPAN class=attributename</SPAN=<SPAN class=value"image"</SPAN <SPAN class=attributeclass</SPAN=<SPAN class=value"hidden"</SPAN <SPAN class=attributevalue</SPAN=<SPAN class=value""</SPAN /</SPAN
<SPAN class=tag</<SPAN class=titlediv</SPAN</SPANcss复制代码代码如下:<SPAN class=class.hidden</SPAN <SPAN class=rules{
<SPAN class=rule<SPAN class=attributedisplay</SPAN:<SPAN class=value none</SPAN</SPAN
<SPAN class=rule}</SPAN</SPAN复制代码代码如下:jquery$('a').on('click', function(e) {
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）