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