现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件,

为了解决这个问题我走了不少弯路:

1、用原生的 input file , 不支持ajax上传文件,你肯定会说可以用 ajax form表单上传了呀?不过我后面还要调用上传成功后用js处理一些对话框,所以这种方法排除

2、用了 uploadify 上传插件,弄出来能上传东西,结果不理想;因为不能判断上传的是哪一张图片,需求得判断每一张图片,排除

3、最后选择了jquery.form.min.js  这个上传插件,至于怎么用网上有不少的教程了,我这里就列出我遇到的一些问题吧,供日后再次遇到能快速使用(忘记了可以快速找到)

     下面说说 jquery.form.min.js 插件 它是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交。jquery.form.min.js 有两个核心方法ajaxForm()和ajaxSubmit(),由于我只用到了ajaxSubmit(),所以我只介绍下ajaxSubmit()的应用。

     利用ajaxSubmit()使得整个表单的ajax提交过程变得非常的简单,所以我就说说我遇到的问题:

 

我用 jquery.form.min.js 遇到的几个问题:

3.1 、 单击提交按钮是,对话框自动关闭问题(用jquery.form.min.js中的方法实现)

3.2 、 判断input文件上传类型问题(用input标签的 onchange事件判断)

3.3 、 在IE 浏览器下 input file 清空问题(用js清空)

结合下面这些链接了解 jquery.form.min.js 的常用属性

http://www.helloweba.com/view-blog-236.html

http://www.jb51.net/article/42271.htm

 

下面贴出上面三个问题的前端代码:

问题3.1的答案

 function showRequest(formData, jqForm, options) {//提交前完成,验证input file 中的文件
       if(!true)
       { 
            alert("密码不能为空!")
            return false;//无法通过验证
       }
      else
{ return true;//这样就通过验证 }

 

问题3.3的答案

html

<form id="index_form" name="index_form" role="form" method="post" class="form-horizontal" enctype="multipart/form-data">
      <table>
<tr> <td> 图片一 : <input id="pic1" name="pic1" type="file" onchange="pic1()"/> </td> </tr> <tr> <td> 图片二 : <input id="pic2" name="pic2" onchange="pic2()" type="file" /> </td> </tr> <tr> <td> 图片三: <input id="pic3" name="pic3" onchange="pic3()" type="file" /></td> </tr> </table> <input class="btn btn-primary" value="提交" type="submit" /> </form>

问题3.2答案  js  这里只给出一个input file 验证方法

//校验上传文件是否为图片格式

    function pic1() {
        var strs = new Array(); //定义一数组
        var pic1= $("#pic1").val();
        strs = pic1.split(\'.\');
        var suffix = strs [strs .length - 1];

        if (suffix != \'jpg\' && suffix != \'gif\' && suffix != \'jpeg\' && suffix != \'png\') {
            alert("你选择的不是图片,请选择图片!");
            var obj = document.getElementById(\'pic1\');
            obj.outerHTML = obj.outerHTML; //这样清空,在IE8下也能执行成功
//obj.select(); document.selection.clear(); 好像这种方法也可以清空 input file 的value值,不过我没测试 } }

 $(function(){

    var options = {  
        url:\' .. .. ,, \',
        beforeSubmit:  showRequest,  //提交前处理 
        success:       showResponse,  //处理完成 
        resetForm: true,  
        dataType:  \'json\'  
       };  
  
    $(\'#index_form\').submit(function() { //注意这里的index_form
$(this).ajaxSubmit(options);
return false;//防止dialog 自动关闭
     });
});

 MVC中的action 获取 文件的方法

HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;

            if (files.Count<3)//这里是为了出现未知的错误,所以只有上传了三张图片才执行后面的代码
            {
                gm.id = 1;
                gm.message = "图片没上传成功!";
                return Json(gm);
            }

执行action方法成功后返回前端再次执行的js方法

function showResponse(responseText, statusText) {
         if (responseText.id == 3) {
              alert("上传成功");          
              $("#My_Dialog").modal(\'show\');//走这么多弯路,为的就是这里,再次打开一个Dialog,所以没选择用form 的 action 上传文件
}
else
{
alert(responseText.message);
}
 

 

下面给出 ajaxSubmit() 提供丰富的选项设置,我们根据使用的可能性大小进行列表,以供参考。

属性 描述
url Ajax请求将要提交到该url,默认是表单的action属性值
type 指定提交表单数据的方法(method):“GET”或“POST”。默认值:表单的method属性值(如果没有找到默认为“GET”)。
dataType 期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法,它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持:
\’xml\’:如果dataType == \’xml\’,将把服务器响应作为XML来对待。同时,如果“success”回调方法被指定, 将传回responseXML值。
\’json\’:如果dataType == \’json\’, 服务器响应将被求值,并传递到“success”回调方法,如果它被指定的话。。
\’script\’:如果dataType == \’script\’, 服务器响应将求值成纯文本。。
默认值:null(服务器返回responseText值)
target 指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串,一个jQuery对象,或者一个DOM元素。
默认值:null。
beforeSubmit 表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子(hook),被提供来运行预提交逻辑或者校验表单数据。如果“beforeSubmit”回调函数返回false,那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数:数组形式的表单数据,jQuery表单对象,以及传入ajaxForm/ajaxSubmit中的Options对象。
默认值:null
success 表单成功提交后调用的回调函数。如果提供“success”回调函数,当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。
默认值:null
clearForm 表示如果表单提交成功是否清除表单数据。默认值:null
resetForm 表示如果表单提交成功是否进行重置。默认值: null

jquery.form插件还提供了formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等方法。通常我们可以使用表单验证插件和jquery.form插件一起使用,效果更好。

 

 

 

 

下面给出一个 uploadify 示例代码,供日后参考:

 
<div id="index_Dialog" class="modal hide fade" tabindex="-1" role="dialog"
    aria-labelledby="myCaseLableJH" aria-hidden="true"><form id="index_form" name="indexUploadJH_form" role="form" method="post" class="form-horizontal" enctype="multipart/form-data">
        <b>请上传</b> <br />
          图片上传:<input id="uploadifyID" name="uploadifyID" type="file" multiple="multiple"/>
    </form>
        <input class="btn btn-primary" value="提交" type="button" onclick="javascript:indexFunction();"/>               
</div>
<script type="text/javascript">


       //  认证必填框验证
        function indexFunction() {
            if ($("#Pass").val() == "") {//密码不能为空
                $("Pass").siblings(\'.CasevalidText\').text(\'密码不能为空\').show();
                return;
            }
            var Count = $("#uploadifyID").data(\'uploadify\').queueData.queueLength;
           
            if (lawyerCertificateJHCount <= 0) {
                alert("请上传文件");
                return;
            }
            $(\'#uploadifyID\').uploadify(\'upload\', \'*\');
        }
  
    //清除并且关闭窗体
    function clearfromCasePassdata() {
       // $("#index_form :input").not(":button, :submit, :reset, :hidden").val("").removeAttr("checked").remove("selected"); //核心
        $("#index_Dialog").modal(\'hide\');
    }
    $(function () {
        //上传文书附件管理
        loadFun();//初始化插件

    })
        //关闭上传图片窗体
        function ClosePDFsee() {
            $("#index_Dialog").modal(\'hide\');
        }
        
               
function loadFun(){
            $(\'#uploadifyID\').uploadify({
                \'swf\': \'/Scripts/uploadify/uploadify.swf\',  //FLash文件路径
                \'buttonText\': \'浏  览\',
                \'width\': 40,                          // 按钮的宽度
                \'height\': 15,                                //按钮文本
                \'uploader\': \'/Home/getCasePassInfo\',        //处理文件上传Action
                \'queueID\': \'lawyerCasefileQueue\',           //队列的ID
                \'queueSizeLimit\': 999,                          //队列最多可上传文件数量,默认为999
                \'auto\': false,                                 //选择文件后是否自动上传,默认为true
                \'multi\': false,                                 //是否为多选,默认为true
                \'removeCompleted\': true,                       //是否完成后移除序列,默认为true
                \'fileSizeLimit\': \'0MB\',
                \'fileTypeDesc\': "Image Files",                 //Files 标识可以上传任意文件
                \'fileTypeExts\': \'*.jpg;*.png;*.gif;*.jpeg;\', //允许上传的文件类型,限制弹出文件选择框里能选择的文件
                \'onQueueComplete\': function (event, data) {                 //所有队列完成 后事件
                     $(\'#uploadifyID\').uploadify(\'cancel\', \'*\');
                },
                \'onUploadStart\': function (file) {
                    $(\'#uploadifyID\').uploadify("settings", \'formData\', { \'Pass\': $("#Pass").val(), Phone: $("#Phone").val(), no: $("#no").val(), name: $("#name").val(), fileIndex: file.index, filelength: 

$("#uploadifyID").data(\'uploadify\').queueData.queueLength, intCount: file.index });
                },
                \'onUploadError\': function (event, queueId, fileObj, errorObj) {

                },
                \'onUploadSuccess\': function (file, data, respone) {
                    data = JSON.parse(data);
                    if (data.id == 2) {
                        $("#index_Dialog").modal(\'hide\');
                        $(\'#IndexmediaForm\').media({
                            width: 500, height: 600,
                            src: url
                        });
                        $("#newDialog").modal(\'show\');
                    }
                    else {
                        alert("上传失败," + data.message);
                    }
                }
            });

        }

    

版权声明:本文为xuyatao原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/xuyatao/p/7359725.html