前台页面 1 @{ 2 Layout = null; 3 } 4 <!DOCTYPE html> 5 <html> 6 <head> 7 <meta name="viewport" content=" ...
前台页面
1 @{ 2 Layout = null; 3 } 4 <!DOCTYPE html> 5 <html> 6 <head> 7 <meta name="viewport" content="width=device-width" /> 8 <script src='/images/loading.gif' data-original="~/Scripts/jquery-1.7.2.min.js"></script> 9 <script src='/images/loading.gif' data-original="~/Scripts/jquery.form.js"></script>10 <title>upload</title>11 </head>12 <body>13 <form id="fileForm" method="post" enctype="multipart/form-data" action="/upload/upload">14 文件名称：<input name="fileName" type="text"><br />15 上传文件：<input name="myfile" type="file" multiple="multiple"><br />16 <input id="submitBtn" type="submit" value="提交">17 <img src='/images/loading.gif' data-original="#" id="iceImg" width="300" height="300" style="display: block;" />18 </form>19 20 21 <input type="text" name="height" value="170" />22 <input id="sbtn2" type="button" value="提交表单2">23 24 <input type="text" name="userName" value="" />25 <script type="text/javascript">26 $(function () {27 $("#fileForm").ajaxForm({28 //定义返回JSON数据，还包括29 //clearForm Boolean值属性，表示是否在表单提交成功后情况表单数据30 //dataType 提交成果后返回的数据格式，可选值包括31 //target 服务器返回信息去更新的页面对象，可以是jquery选择器字符串或者jquer对象或者DOM对象。32 //type 提交类型可以是”GET“或者”POST“33 //url 表单提交的路径34 dataType: 'json',35 beforeSend: function () {36 //表单提交前做表单验证37 $("#myh1").show();38 },39 success: function (data) {40 //提交成功后调用41 //alert(data.message);42 $("#iceImg").attr('src', '/upload/img/' + data.fileName);43 $("#myh1").hide();44 //防止重复提交的方法45 //1.0 清空表单数据46 $('#fileForm').clearForm();47 //2.0 禁用提交按钮48 49 //3.0 跳转页面50 }51 });52 53 54 $("#myfile").change(function () {55 $("#submitBtn").click();56 });57 58 $("#iceImg").click(function () {59 $("#myfile").click();60 });61 });62 </script>63 <h1 id="myh1" style="display: none;">加载中...</h1>64 </body>65 </html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：jquery.form.js实现异步上传
关键词：JS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
