jquery实现简单的ajax上传

最新推荐文章于 2025-08-15 22:56:20 发布

wq1030

最新推荐文章于 2025-08-15 22:56:20 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

分类专栏：上传下载文章标签： jQuery Ajax JavaScript json Blog ViewUI

本文链接：https://blog.youkuaiyun.com/wq1030/article/details/83729726

上传下载专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用jQuery和easyui插件实现文件上传的方法。通过弹出窗口选择文件并异步提交表单，实现文件上传功能。文章还提供了解决jQuery.form插件上传文件时无法执行success回调函数及接收返回JSON数据的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面如下

<!-- 加载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