精华内容
下载资源
问答
  • ajax方法上传文件时用到 new FormData()方法来传递数据,但在IE8浏览器下提示错误。改用ajaxSubmit方式进行提交,引用到jquery.form.js插件 <%-- 原方法 var formData = new FormData($("#uploadForm")[0]); ...

    问题记录:2018-07-30

    ajax方法上传文件时用到 new FormData()方法来传递数据,但在IE8浏览器下提示错误。改用ajaxSubmit方式进行提交,引用到jquery.form.js插件

    <%-- 原方法 

    var formData = new FormData($("#uploadForm")[0]);
    $.ajax({ url: "<%=mainWeb%>/goods/count/importExcel.do",
    data: formData,
    cache: false,
    async: true,
    type: "post",

    ..........

    --%>

     

    <%-- ajaxSubmit --%>

    表单:

    <form id="uploadForm" action="" method="post" enctype="multipart/form-data" style="text-align:left;" target="uploadScanFileIfrm">
    <input type="file" name="uploadFile" id="uploadFile" style="height: 27px; width: 98%;" />
    </form>

    按钮:

    <button id="btn_upload" οnclick="javascript:doUploadFile()">开始导入</button>

    js(引用jquery.form.js插件):

    function doUploadFile(){
    $("#uploadForm").ajaxSubmit({
    type: 'post',
    url: "<%=mainWeb%>/goods/count/importExcel.do",
    success: function (response) {
    var message = JSON.parse(response);
    if(message.result){
    alert("导入成功");
    parent.doQuery();
    }else{
    layer.alert(message.msg);
    }
    },
    error: function (response) {
    var message = JSON.parse(response);
    alert("导入失败:"+message.msg);
    }
    });

    }

    IE下ajax返回出现下载提示,在spring-mvc配置文件中添加

    <bean id="mappingJacksonHttpMessageConverter"

    class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">

    <property name="supportedMediaTypes">

    <list>

    <value>text/html;charset=UTF-8</value>

    </list>

    </property>

    </bean>

    转载于:https://www.cnblogs.com/xxww/p/9390476.html

    展开全文
  • 1、编写index.html Upload Files using XMLHttpRequest - Minimal Select a File to Upload 文件路径: 2、编写upload.php //获取文件后缀名 functi

    1、编写index.html

    <!DOCTYPE html>
    <html>
    <head>
        <title>Upload Files using XMLHttpRequest - Minimal</title>
        <script type="text/javascript" src="js/upload.js"></script>
    </head>
    <body>
      <form name="form1" enctype="multipart/form-data" method="post" action="upload.php">
        <div class="row">
          <label for="fileToUpload">Select a File to Upload</label><br />
          <input type="file" name="fileToUpload" id="fileToUpload" οnchange="fileUpload('fileToUpload','form1','fileid');"/>
        </div>
        <div id="fileName"></div>
        <div id="fileSize"></div>
        <div id="fileType"></div>
        <div id="progressNumber"></div>
        文件路径:<input type="text" name="fileid" id="fileid" value="" />
      </form>
    </body>
    </html>

    2、编写upload.php

    <?php
    	//获取文件后缀名
    	function getExt($filename){
    		$array = explode('.', $filename);
    		$ext = array_pop($array);
    		return strtolower($ext);
    	}
    
    	//随机数
    	function randStr($length){
    		$chars="0123456789abcdefghijklmnopqrstuvwxyz"; //字符串
    		$string="";
    		for($i=0;$i<$length;$i++){
    			$string.=substr($chars, rand(0,strlen($chars)-1),1);
    		}
    		return $string;
    	}
    	
    	function upFile(){
    		$files=&$_FILES['fileToUpload'];
    		//print_r($_FILES);exit;
    		if(!empty($files) && !is_uploaded_file($files['tmp_name'])){
    			return $this->status_data(-1,null,"未上传文件");
    		}
    		//print_r($this->datas);exit;
    
    		$ext=getExt($files['name']);
    		
    		$imgExt=array('jpg','png','jpeg','gif');
    		if(in_array($ext,$imgExt)){
    			$cun='upload/picture/'.date('Y-m-d').'/';
    		}else{
    			$cun='upload/attach/'.date('Y-m-d').'/';
    		}
    		if(!is_dir($cun)){
    			mkdir($cun);
    		}
    		
    		$t=time().randStr(6);
    		$file_ext=substr($files['name'],strrpos($files['name'],'.'));
    		$fiename=$t.$file_ext;
    		$putPath=$cun.$fiename;
    		
    		$rs = move_uploaded_file($files['tmp_name'],$putPath);//上传图片
    		if($rs){
    			echo  $_POST['fileid']."|".$putPath;
    		}else{
    			echo  "error";
    		}
    	}
    	
    	upFile();
    	
    ?>

    3、引用js

    function fileUpload(filename,formname,fileid) {
      var file = document.getElementById(filename).files[0];
      if (file) {
        var fileSize = 0;
        if (file.size > 1024 * 1024)
          fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
        else
          fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
        document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
        document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
        document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
        var fd = new FormData(document.forms.namedItem(formname));
        fd.append("fileid", fileid);//返回时的图片显示在哪个div id里面
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open(document.forms.namedItem(formname).method, document.forms.namedItem(formname).action);
        xhr.send(fd);
      }
    }
    
    function uploadProgress(evt) {
      if (evt.lengthComputable) {
        var percentComplete = Math.round(evt.loaded * 100 / evt.total);
        document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
      }
      else {
        document.getElementById('progressNumber').innerHTML = 'unable to compute';
      }
    }
    
    function uploadComplete(evt) {
      if(evt.target.responseText){
        var imageres = evt.target.responseText;
        var imagearr = imageres.split("|");
        var imageid = imagearr[0];
        var imageurl = imagearr[1];
        document.getElementById(imageid).value = imageurl;
      }
    }
    
    function uploadFailed(evt) {
      document.getElementById('error').innerHTML = 'Error';
    }
    
    function uploadCanceled(evt) {
      document.getElementById('abort').innerHTML = 'Canceled';
    }


    对ie支持不是很好,js高手可自行修改兼容。

    展开全文
  • 兼容IE8使用ajax上传文件

    万次阅读 2017-09-03 14:07:13
    小编最近遇到一个问题,在项目中用到了发送邮件的功能,发送邮件就需要上传附件,使用ajax异步刷新上传文件,并且兼容IE8浏览器新建ASP.NET Web应用程序 页面效果其中,用到了两个JS文件 链接:...

    小编最近遇到一个问题,在项目中用到了发送邮件的功能,发送邮件就需要上传附件
    使用ajax异步刷新上传文件,并且兼容IE8浏览器

    新建ASP.NET Web应用程序
    页面效果

    这里写图片描述

    其中,用到了两个JS文件
    链接:http://pan.baidu.com/s/1bo21xjp 密码:ensi

    页面代码

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm.aspx.cs" Inherits="FileUpload.WebForm" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="Source/jquery-1.7.1.js"></script>
        <script src="Source/ajaxfileupload.js"></script>
    </head>
    <body>
        <p><input type="file" id="file1" name="file" /></p>
        <input type="button" value="上传" />
        <p><img id="img1" alt="上传成功" src="" /></p>
    </body>
    
    <script type="text/javascript">
        $(function () {
            $(":button").click(function () {
                ajaxFileUpload();
            })
        })
        function ajaxFileUpload() {
            $.ajaxFileUpload
            (
                {
                    url: '/WebForm.aspx', //用于文件上传的服务器端请求地址
                    secureuri: false, //一般设置为false
                    fileElementId: 'file1', //文件上传空间的id属性  <input type="file" id="file" name="file" />
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        $("#img1").attr("src", data.imgurl);
                        if (typeof (data.error) != 'undefined') {
                            if (data.error != '') {
                                alert(data.error);
                            } else {
                                alert(data.msg);
                            }
                        }
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                }
            )
            return false;
        }
    </script>
    </html>

    后台代码

    using System;
    using System.Collections.Generic;
    using System.Drawing;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    
    namespace FileUpload
    {
        public partial class WebForm : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                HttpFileCollection files = Request.Files;//这里只能用<input type="file" />才能有效果,因为服务器控件是HttpInputFile类型
                string msg = string.Empty;
                string error = string.Empty;
                string imgurl;
                if (files.Count > 0)
                {
                    files[0].SaveAs(Server.MapPath("uploads/") + System.IO.Path.GetFileName(files[0].FileName));
                    msg = " 成功! 文件大小为:" + files[0].ContentLength;
                    imgurl = "/" + files[0].FileName;
                    string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
                    Response.Write(res);
                    Response.End();
                }
            }
        }
    }

    在做IE兼容性测试的时候,F12选择浏览器版本,上述代码兼容IE8、IE7、IE5

    这里写图片描述

    为什么没有IE6兼容模式?

    相比 IE6 而言,IE7 没有提供巨大的实质上的内核功能升级,更多地是在打补丁、修 bug,可以说,IE6 和 IE7 这两个版本的内核是严重同质化的, IE6 的用户量本身也在自然萎缩,因此,当 IE8 推出时,它的元标记和开发工具就放弃了 IE6 模式。

    展开全文
  • 现在,人们喜欢在浏览网页时做一些其他事情而不离开该网页,这通常是通过... Note: 该代码不支持较老的ie浏览器,通过Can I use我们只支持ie10+ Let’s Code 我们将从HTML结构开始,然后是JavaScript,然后我将给您提供P
  • AJAX实现文件上传时,执行后一直跑到error的function里面。 最后发现,是在form里面加了个hidden标签,只定义了id,没有定义name。 把name也赋值就ok了。

    用AJAX实现文件上传时,执行后一直跑到error的function里面。

    后台报错:org.apache.commons.fileupload.FileUploadException: Stream ended unexpectedly

    并且,只有IE有问题,火狐,谷歌都没有问题。

    最后发现,是在form里面加了个hidden标签,只定义了id,没有定义name。

    把name也赋值就ok了。

    错误代码:

    <input id="reportFile_orderMax" value="1" type="hidden">
    正确代码:

    <input id="reportFile_orderMax" name="reportFile_orderMax" value="1" type="hidden">


    展开全文
  • 在使用ajax向后台发送请求的时候,在使用ie 进行调试的时候发现根据条件进行查询时,返回的数据与没有根据条件进行查询时数据相同,也就是条件没有发生作用。经过同事的帮助发现ajax初始化设置时没有cache:false,ie...
  • 更改服务器端数据返回类型:Response.ContentType = "text/plain; charset=utf-8"; 转载于:https://www.cnblogs.com/fb-boy/p/3757101.html
  • 最近遇到一个极为头疼的...使用jquery.form.js (version: 3.51.0)异步提交表单,上传文件,表单 enctype="multipart/form-data">... 在google里面能够正常使用,但是测试ie8时,进入后台,文件上传成功,@responseBody
  • 1、ajaxjQuery.ajax({url: contextUrl + "/accidentAttachment/saveAccidentAttachment",type:'post',data: formData,contentType: false,processData: false,error: function (XMLHttpRequest, status) {bootbox....
  • 首先简单了解一下 FormData,点击链接:...IE浏览器版本最好为:IE10+,因为 FormData 兼容性问题 然后查看示例,代码如下↓ html 代码: &lt;!DOCTYPE html&gt; &lt;html lan...
  • -- 避免IE执行AJAX时,返回JSON出现下载文件 --> <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"> <property name="messageConverters"> <...
  • 遇到了一个上传文件和下载文件的业务,利用ajax实现,上传单文件整体上传,不进行分片上传相对简单,这里也暂不讨论大文件分片上传的情况,后面可能会写这个。下载文件如果后端返回链接可以直接赋值给a的href点击...
  • Ajax上传文件

    2014-08-12 14:36:54
    主要是以js小脚本的方式来提交文件的,k
  • ajax上传文件显示进度

    2018-08-15 14:33:52
    下面要做一个ajax上传文件显示进度的操作: 这里先上代码: 1、前端代码 upload.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
  • 因为项目需求客户要求上传使用IE10浏览器,前台适配后发现返回json对象,浏览器会提示下载,解决办法可以将返回类型设置为“text/html”而设置@RequestMapping(value = "/upload",produces="text/html;charset=UTF-8...
  • 在用ajaxFileUpload上传文件时,IE浏览器总是提示下载文件,其他的浏览器都正常,最后找到解决方法是在服务器端设置Header的类型,比如:response.setHeader("Content-type", "text/html");注:"text/html"这里面的...
  • 使用ajaxForm提交表单上传文件后服务器端返回json数据IE浏览器无法解析 ,到后来跟踪一个网站同样地功能才找到问题所在,原来 使用ajaxForm,必须以html格式返回json数据. 也就是 response.setContentType("text/...
  • IE10浏览器会把AJAX请求的数据都缓存下来,然后每次想去刷新数据时发现数据都是一样的,于是导致数据显示异常。解决方法:在页面标签里,加上以下声明:保存后,刷新页面,...IE浏览器缓存导致Ajax请求失败在IE浏...
  • 常用Ajax提交通过URL参数提交,提交方式“POST”,”GET”等,而如果需要通过Ajax提交文件则需要用到FormData。 FormData用法:1、使用FormData实例化表单数据//实例化表单 var form=document.getElementById('myForm...
  • jq实现ajax文件上传

    千次阅读 2019-04-04 23:42:45
    想起用ajax上传文件,主要还是最近的一个项目练习,我总觉得如果用表单submit提交,有不可避免的要进行跳转 说真的,着实让人不爽,于是想到ajax请求方式来完成文件上传,下面开始代码、 客户端 <!...
  • 记录了springmvc+ajaxfileupload IE下弹出下载框问题的解决方案
  • 主要为大家详细介绍了ajax文件上传的相关资料,成功解决了浏览器兼容问题,感兴趣的小伙伴们可以参考一下
  • fileUpload(兼容IEAjax上传图片),可兼容IE8,解决了ajaxfileupload.js无效的问题
  • C#+ajax上传文件

    千次阅读 2010-05-05 00:05:00
    //IE浏览器。  if (!xmlhttp) {  xmlhttp = new ActiveXObject("Microsoft.XML" + "HTTP");  }  }    if(xmlhttp)  {  xmlhttp.open("GET",URL, false); //加载url对应的远程服务器来处理...
  • 错误信息: 严重: Servlet.service() for servlet [springMVC] in context with path [] threw exception [Request processing failed; nested exception is org.springframework.web.multipart.MultipartException:...
  • ajaxSubmit上传文件IE解析
  • 先说明白这个跨域异步上传功能我们借助了Jquery.form插件,它在...我们就不能用这种方式了,我们需要换个思路去干这事,让服务端去重写向我们的客户端,由客户端(与文件上传页面在同域下)来返回相关数据即可。1、Jq...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,804
精华内容 2,721
关键字:

ajax上传文件ie浏览器