美文网首页
兼容IE9 form表单实现文件上传

兼容IE9 form表单实现文件上传

作者: 假笑boys | 来源:发表于2022-10-18 10:10 被阅读0次

因项目需要,客户指定使用IE9进行访问,所以,这里先讲一下,如何使用IE9进行\color{#FF0000}{\rm\small{表单}} 提交文件。

传送门

form表单实现文件上传的三种方式(适用于IE9)
Vue在IE9中兼容上传 关于X-Frame-Options头
IE浏览器加载不出来,按下F12就回复正常

注意: \color{#FF0000}{\rm\small{ie9不支持FormData}} !!!
form表单代码(提交文件一定要有 \color{#FF0000}{\rm\small{enctype="multipart/form-data" ,method="post"}} 这两个属性):
<form id="fileForm"  enctype="multipart/form-data" method="post">
        <div>文件:<input class="easyui-filebox" name="file" id="file" 
                 data-options="buttonText:'选择',prompt:'请选择上传文件'" style="width:80%" > 
        </div>
</form>
   <div>
     <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" 
      onclick="uploadFile()">确定</a>
  </div>
方法一: 使用submit(), \color{#FF0000}{\rm\small{适用于ie9}}
function uploadFile(){
     var filePath = $("#file").filebox('getValue');
     if(null == filePath || filePath == ''){
            $.messager.alert('系统提示:',"请选择上传的文件","warning");
            return false;
     }else{
        var url ="<%=basePath%>test/upload.do"; //后台处理路径
         $("#fileForm").attr('action',url); 
         $("#fileForm").submit();         
         }
       }
方法二: 使用 ajaxSubmit方法, \color{#FF0000}{\rm\small{适用于ie11、谷歌等浏览 }}
function uploadFile(){
            var actionUrl= "";//后台方法
            $("#fileForm").attr('action',actionUrl);   
             //关闭上传文件 界面
             $('#fileWindow').window('close');
             //显示进度条
             $.messager.progress({
                    title:'上传文件',
                    text:'正在上传,请稍后....'
              }) ;
             var options = {
                type: 'post',
                //loading:true,
                dataType: 'json', 
                success:function(data){
                    //处理回调函数
                },
                error:function(data){
                    alert('系统提示:','附件上传失败!');
                },
                complete: function(){
                }
            };
            $("#fileForm").ajaxSubmit(options);
        }
方法三: 使用ajax
function uploadFile(){
           var formData = new FormData($('#fileForm')[0]);//获取表单中的文件
           $.ajax({
               url:"upload",//后台的接口地址
               type:"post",//post请求方式
               data:formData,//参数
               cache: false,
               processData: false,
               contentType: false,
               success:function (data) {
                   //处理返回参数
               },error:function () {
                   alert("操作失败~");
               }
 
           })
}

相关文章

网友评论

      本文标题:兼容IE9 form表单实现文件上传

      本文链接:https://www.haomeiwen.com/subject/ojrezrtx.html