`

支持IE8的不刷新页面上传图片

 
阅读更多

对于IE8,IE9来说,不支持formData,导致上传文件必须用post页面的方式才可以。那么怎样做到不刷新当前页面,上传一张图片呢?

除了用webuploader以外,如果不需要显示进度条(小文件、图片上传都是这样的需求),那么可以用我这个方法。

在当前页面引入一个隐藏的iframe,iframe的src指向一个上传文件的页面,点击当前页面的某个按钮或图片,触发iframe中的上传文件的input的click,那么选择一个文件以后,让iframe中的页面进行post,再让post到的php页面在将文件妥善存放后,以get参数带回iframe中的原页面(上传文件那个),这时候,那个页面利用window.postMessage将消息(带有上传图片HTTP路径)传递回当前页,当前页收到消息,设置图片路径和input的value即可。

代码在附件中,下载下来一定放在某个虚拟主机根目录下运行。

根据自己的项目需求可以进行调整,代码量很小的。这个实例代码没考虑更多的上传安全或者回传get参数中有特殊字符的问题,具体项目中,要考虑这些问题。

分享到:
评论

相关推荐

    webuploader实现的不刷新页面上传文件(可以有进度条)

    总的来说,WebUploader是一个强大且易用的前端文件上传组件,它能够帮助开发者轻松实现无刷新页面上传文件,同时提供丰富的事件和自定义选项,满足各种项目需求。无论是在现代浏览器还是在古老的IE8中,WebUploader...

    兼容ie8的上传源码

    3. **ActiveX控件**:对于更复杂的特性,如进度条显示,可能使用了ActiveX控件,因为IE8原生不支持FileReader API。 4. **跨域上传**:考虑到现代Web应用中跨域请求的常见需求,源码可能包含了CORS(跨源资源共享)...

    fileUpload(兼容IE的Ajax上传图片)

    3. **兼容性处理**:对于不支持FileReader和FormData的浏览器(如IE8),可能需要使用iframe或者ActiveXObject(XMLHttpRequest的IE特有实现)来模拟Ajax上传。 4. **上传过程**:当文件选择后,使用Ajax发送POST...

    无刷新上传插件uploadify3.2

    5. **跨浏览器兼容**:Uploadify3.2支持主流的Web浏览器,包括Chrome、Firefox、Safari、IE8及以上版本,确保了广泛的用户覆盖。 6. **AJAX支持**:通过使用AJAX技术,Uploadify3.2实现在后台处理文件上传,无需...

    asp Ajax无刷新文件上传(带进度条,无组件)

    在网页开发中,用户常常需要进行文件上传操作,传统的文件上传方式通常会伴随着页面的刷新,这不仅影响用户体验,也可能导致数据丢失。为了解决这一问题,ASP(Active Server Pages)结合AJAX(Asynchronous ...

    jquery无刷新上传 .net版

    这个技术利用了Ajax技术实现页面无刷新的文件上传,提供了更好的用户体验,避免了传统文件上传导致的整个页面刷新,使得用户在上传文件时可以继续进行其他操作。 **核心组件:ajaxFileUpload.js** `ajaxFileUpload...

    分享一款文件上传信息即时同步刷新的代码

    3. **Progress事件**:XMLHttpRequest支持监听`progress`事件,当上传或下载数据时,该事件会被触发,我们可以从中获取到上传进度,比如已上传的数据量和总数据量。 4. **Web Workers**:如果文件较大,上传可能...

    jsp无刷新上传文件

    此外,需要注意不同浏览器对文件上传的支持情况,比如IE8及以下版本对FormData和XMLHttpRequest Level 2的支持有限。 6. **FileServlet.java**:这是服务器端处理文件上传的Servlet,通常会实现`doPost`方法来接收...

    国外的多文件上传带预览(支持IE、火狐、谷歌、opera)

    7. **浏览器兼容性**:对于不支持HTML5 File API的老版本浏览器(如IE),可能需要依赖Flash或Silverlight等插件来实现类似功能,或者提供降级方案。 8. **安全性**:为了防止恶意文件上传,开发者还需要进行安全...

    JQuery无刷新上传并显示图片

    "JQuery无刷新上传并显示图片"是一个实用的技术实践,旨在实现用户上传图片后无需刷新页面就能即时预览的效果,这对于提升用户体验至关重要。这个技术涉及到的知识点主要包括以下几个方面: 1. **Ajax异步上传**:...

    php无刷新图片上传

    在IT行业中,无刷新图片上传是一种常见的用户交互技术,它使得用户可以在不重新加载整个网页的情况下上传图片,提高了用户体验。本篇文章将详细讲解如何利用PHP和AJAX实现这一功能,以及在WIN8环境下,IE10和Firefox...

    c# 多选无刷新附件批量上传

    这一功能让用户体验得到显著提升,因为它允许用户一次性选择多个文件,并在后台进行上传,无需每次上传都刷新页面。接下来,我们将详细讨论实现这个功能的关键知识点。 1. **多选文件**: - 在HTML5中,`...

    jquery实现图片即时上传

    3. **上传图片**:使用Ajax技术,将图片数据发送到服务器,无需刷新页面。 4. **进度反馈**:在上传过程中,提供上传进度信息,提升用户体验。 5. **错误处理**:处理可能出现的网络问题或服务器响应错误。 对于...

    iframefileuploadjs全部通过原生JS实现页面无刷新上传文件

    而"iframefileuploadjs全部通过原生JS实现页面无刷新上传文件"的方案提供了一种轻量级的解决方案,它不依赖jQuery或Ajax,仅靠JavaScript原生API来实现在不刷新页面的情况下进行文件上传,并且能够传递JSON数据给...

    ajax 无刷新上传图片兼容所有浏览器

    在现代Web应用中,用户体验是至关重要的因素之一,而无刷新上传图片功能是提升用户体验的有效方式。Ajax(Asynchronous JavaScript and XML)技术的引入,使得网页可以在不重新加载整个页面的情况下与服务器进行交互...

    ASP.NET jquery ajax无刷新上传文件demo

    在IE6这样的旧版浏览器中,由于不支持HTML5的File API,它会模拟进度条效果,尽管这并不是真正的上传进度,但仍然能够给予用户一定的反馈。 在描述中提到的 "无刷新上传 ashx处理" 指的是使用ASHX(HTTP Handler)...

    IE上传图片滤镜

    "IE上传图片滤镜"是一种优化此过程的技术,它允许用户在图片实际上传到服务器之前就能预览图片,并在满意后才发送请求。这种方法提高了交互性和用户体验。 "上传"是指在Web应用中,用户可以通过浏览器将本地文件...

    JS异步文件上传(兼容IE8+)

    7. `iframe`加载完响应后,会执行返回的JavaScript代码,从而调用父页面的回调函数,这样你就可以在不刷新页面的情况下获取到上传的结果。 以下是一个简化的代码示例: ```html <!-- JSP页面 --> 上传" /> ;...

    仿163无刷新ajax图片上传源代码

    在IT行业中,无刷新(Ajax)技术是一种网页更新方式,它允许页面在不重新加载整个页面的情况下与服务器交换数据并局部更新。此技术的核心是利用JavaScript的XMLHttpRequest对象,实现客户端与服务器之间的异步通信。...

Global site tag (gtag.js) - Google Analytics