文件上传方式(上传file类型表单元素内容)

一、使用FormData：

缺点：基本上不支持ie

示例：

<!-- // modal-body begin -->
                            
                               <div class="form-group">
                                    <label class="col-lg-3 col-md-3 col-sm-3 control-label font-normal align-right">体系结构：</label>
                                    <div class="col-lg-6 col-md-6 col-sm-6">
                                        <select name="addSoftModalType" id="add-soft-modal-type" class="form-control">                                                                
                                                <option value="龙芯">龙芯</option>
                                                <option value="飞腾">飞腾</option>                                
                                        </select>
                                    </div>
                                </div>
                                
                               <div class="form-group">
                                    <label class="col-lg-3 col-md-3 col-sm-3 control-label font-normal align-right">软件名称：</label>
                                    <div class="col-lg-6 col-md-6 col-sm-6">
                                        <select type="text" class="form-control" id="add-soft-modal-name" name="addSoftModalName"></select>
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-3" style="padding-left: 0;">
                                        <div class="checkbox">
                                            <span class="red"></span>
    
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="col-lg-3 col-md-3 col-sm-3 control-label font-normal align-right">版本：</label>
                                    <div class="col-lg-6 col-md-6 col-sm-6">
                                        <input type="text" class="form-control" id="add-soft-modal-version" name="addSoftModalVersion"/>
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-3" style="padding-left: 0;">
                                        <div class="checkbox">
                                            <span class="red"></span>
    
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="col-lg-3 col-md-3 col-sm-3 control-label font-normal align-right">文件：</label>
                                    <div class="col-lg-6 col-md-6 col-sm-6">
                                        <input class="form-control" id="add-soft-modal-file" name="addSoftModalFile" type="file" />
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-3" style="padding-left: 0;">
                                        <div class="checkbox">
                                            <span class="red"></span>
    
                                        </div>
                                    </div>
                                </div>
                                                            
                               <div class="form-group">
                                    <label class="col-lg-3 col-md-3 col-sm-3 control-label font-normal align-right">厂商：</label>
                                    <div class="col-lg-6 col-md-6 col-sm-6">
                                        <input type="text" class="form-control" name="addSoftModalCompany" id="add-soft-modal-company"/>
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-3" style="padding-left: 0;">
                                        <div class="checkbox">
                                            
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="col-lg-3 col-md-3 col-sm-3 control-label font-normal align-right">描述：</label>
                                    <div class="col-lg-6 col-md-6 col-sm-6">
                                        <textarea type="text" class="form-control" id="add-soft-modal-describe" name="addSoftModalDescribe" value="" style="height: 60px;"></textarea>
                                    </div>
                                </div>
                                
                            <!-- // modal-body end -->

var formData = new FormData();
            formData.append("file", document.getElementById("add-soft-modal-file").files[0]);  
            formData.append("snid", $("#add-soft-modal-name").val());  
            formData.append("architecture", $("#add-soft-modal-type").val());
            formData.append("version", $("#add-soft-modal-version").val());
            formData.append("manufacturer", $("#add-soft-modal-company").val());  
            formData.append("description", htmlEncode($("#add-soft-modal-describe").val()));  
            
            $.ajax({
                type: "POST",
                url: '/bmpf/softmng/software/add_software_package/',
                data: formData,
                /**
                *必须false才会自动加上正确的Content-Type
                */
                contentType: false,
                /**
                * 必须false才会避开jQuery对 formdata 的默认处理
                * XMLHttpRequest会对 formdata 进行正确的处理
                */
                processData: false,
                success: function(data){
                    console.log(JSON.parse(data));
                    if(JSON.parse(data).ret){
                        toastr.success("添加软件成功", "成功提示");
                        $("#add-soft-modal-form")[0].reset();
                        $("#add-soft-modal-form").data("bootstrapValidator").resetForm();
                        $("#add-soft-modal").modal("hide");
                        $softTable.bootstrapTable("refresh");
                    }else{
                        toastr.error(JSON.parse(data).errMsg, "错误提示");
                        console.log("错了吗");
                    }
                },
                error: function(data){
                    toastr.error(JSON.parse(data).errMsg, "错误提示");
                }
            });

二、使用jquery.form.js：

优点：支持ie8及以上版本浏览器