日期:2014-05-16  浏览次数:20547 次

jquery实现简单的ajax上传

页面如下

<!-- 加载jquery -->
		<script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>
<!-- 加载easyui -->
??<script type="text/javascript" src="plugins/jquery/jquery-easyui-1.1.2/jquery.easyui.min.js"></script>
<!-- 加载jquery-form -->
		<script type="text/javascript" src="plugins/jquery/jquery.form.js"></script>

?

<form id="upForm" method="POST" enctype="multipart/form-data"> 
?照片上传
<input type="button" onclick="show_upload()" value="上传"/>
?<div id="uploadWin" class="easyui-window" title="My Window" closed="true">
??上传文件:<input type="file" name="file" id="theFile"/>? 
??<br/>? 
??<input type="submit" value="提交" onclick="return upload();"/> 
??<input type="button" value="取消" /> 
??<div id="upMessage" style="displan:hidden"></div>?????? 
?</div>
</form>

?<div>是一个弹出层,使用的是easyui

js文件如下:

$(document).ready(function() {
	$('#upForm').form({
        url:"uploadPhoto.action",
        onSubmit: function(){
                // do some check
                // return false to prevent submit;
        },
        success:function(data){
                alert("照片上传成功!");
                $("#uploadWin").window("close");
        }
	});
});
//打开照片上传窗口
function show_upload()
{
?$('#uploadWin').window({
??title : '照片上传',
??height : 200,
??width : 300
?});
?$("#uploadWin").window("open");
}

?

action层中添加属性

private File file;

?

就能接受到上传的文件,file为文件选择框的name属性

?

实际上就是简单的利用了jquery.form的异步提交

?

jquery.form上传文件,不执行seccess函数,接收不到返回的json的解决办法

http://669341085.iteye.com/blog/869153

?