文件上传 jqueryForm

最新推荐文章于 2022-05-07 18:59:52 发布

weixin_34081595

最新推荐文章于 2022-05-07 18:59:52 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/carryLess/p/7234758.html

本文介绍如何使用jQuery Form插件实现文件的Ajax上传功能，并解决在不同浏览器之间的兼容性问题。文章提供了具体的代码示例，包括如何在表单提交时触发Ajax上传、提交前及成功后的处理逻辑。

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

关于formData方式ajax上传文件的方式在笔者随笔开发日记5-18中有描述,在此不做记录.

由于之前使用的是formData方式上传文件,但是在后期处理浏览器兼容问题的时候出现头痛的事情,formData的写法中有一句话

var formData = new FormData($("#add-documentForm")[0]);

结果在IE下出现FormData未定义的问题,于是改用了jqueryForm进行ajax文件上传

有两种方式: ajaxForm:在界面加载完成的时候绑定到form表单上,当form表单提交时就是ajax提交

　　　　　 ajaxSubmit :手动调用插件的ajax提交，可以在form提交的时候触发ajaxSubmit，也可以在一个button的click事件里面触发ajaxSubmit<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%

String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <base href="<%=basePath%>">  
   <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <script type="text/javascript" src="<%=basePath %>common/js/jquery-1.8.2.min.js"></script>  
    <script type="text/javascript" src="<%=basePath %>common/js/jquery.form.js"></script>  
    <script type="text/javascript">  
        $(document).ready(function() {   
             $("#myForm").submit(function(){  
                $('#myForm').ajaxSubmit({   
                    beforeSubmit:handleBeforeSubmit,  
                    success:handleSuccess  
                });   
                //记得返回false，阻止页面的默认提交行为  
                return false;  
            });  
        });  
        /**  
         * 提交请求发出之前的处理  
         */  
        function handleBeforeSubmit(){  
            console.info('提交请求发出之前的处理')  
        }  
        /**  
         * 上传成功后的处理  
         */  
        function handleSuccess(){  
            console.info('上传成功后的处理')  
            alert('上传成功 !');  
        }  
　　/**
　　 * ajaxForm方式,在页面加载完成时绑定到form表单上
　　 *
　　 */
　　　　$(document).ready(function() {   
            $('#myForm').ajaxForm({   
                beforeSubmit:handleBeforeSubmit,  
                success:handleSuccess  
            });   
        });  
        
 </script>  
 </head>  
  <body>  
    <form action="upload/uploadFile.htm" method="post" enctype="multipart/form-data" id="myForm">  
      <label for="myFile">选择文件：</label>  
      <input type="file" name="myFile" />  
      <input type="hidden" name="myfield" value="myvalue">  
      <input type="submit" value="上传"/>  
   </form>  
  </body>  
</html>

　在引入js文件时候,注意先引入jquery文件再引入jquery-form.js

转载于:https://www.cnblogs.com/carryLess/p/7234758.html