http://www.w3.org/1999/xhtml"> javascript实现IE,firefox客户端图片预览 //使用IE条件注释来判断是否IE6，通过判断userAgent不一定准确 if (document.a" /> http://www.w3.org/1999/xhtml"> javascript实现IE,firefox客户端图片预览 //使用IE条件注释来判断是否IE6，通过判断userAgent不一定准确 if (document.a">
社区
学习
工具库
AI工具
休闲
搜索
简体中文
目录
回复内容：
首页 后端开发 php教程 点上传之后怎么让图片显示在红色的框里，页面不跳?

点上传之后怎么让图片显示在红色的框里，页面不跳?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 29, 2016 pm 04:09 PM

回复内容：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"content-type"</span> <span class="na">content=</span><span class="s">"txt/html;charset=utf-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>javascript实现IE,firefox客户端图片预览<span class="nt"></title></span>
<span class="nt"><script></span>
     <span class="c1">//使用IE条件注释来判断是否IE6，通过判断userAgent不一定准确</span>
     <span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">all</span><span class="p">)</span>
          <span class="nb">document</span>
                    <span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s1">'<!--[if lte IE 6]><'</span><span class="o">+</span><span class="s1">'script type="text/javascript">window.ie6= true<\/'</span><span class="o">+</span><span class="s1">'script><![endif]   '</span><span class="p">);</span>
     <span class="c1">// var ie6 = /msie 6/i.test(navigator.userAgent);//不推荐，有些系统的ie6 userAgent会是IE7或者IE8</span>
     <span class="kd">function</span> <span class="nx">change</span><span class="p">(</span><span class="nx">picId</span><span class="p">,</span> <span class="nx">fileId</span><span class="p">)</span> <span class="p">{</span>
          <span class="kd">var</span> <span class="nx">pic</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">picId</span><span class="p">);</span>
          <span class="kd">var</span> <span class="nx">file</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">fileId</span><span class="p">);</span>
          <span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">FileReader</span><span class="p">)</span> <span class="p">{</span><span class="c1">//chrome,firefox7+,opera,IE10,IE9，IE9也可以用滤镜来实现</span>
               <span class="nx">oFReader</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FileReader</span><span class="p">();</span>
               <span class="nx">oFReader</span><span class="p">.</span><span class="nx">readAsDataURL</span><span class="p">(</span><span class="nx">file</span><span class="p">.</span><span class="nx">files</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span>
               <span class="nx">oFReader</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oFREvent</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">pic</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">oFREvent</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">result</span><span class="p">;</span>
               <span class="p">};</span>
          <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">all</span><span class="p">)</span> <span class="p">{</span><span class="c1">//IE8-</span>
               <span class="nx">file</span><span class="p">.</span><span class="nx">select</span><span class="p">();</span>
               <span class="nx">file</span><span class="p">.</span><span class="nx">blur</span><span class="p">();</span><span class="c1">//清楚input 焦点  有焦点会导致拒绝访问</span>
               <span class="kd">var</span> <span class="nx">reallocalpath</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">selection</span><span class="p">.</span><span class="nx">createRange</span><span class="p">().</span><span class="nx">text</span><span class="c1">//IE下获取实际的本地文件路径</span>
               <span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">ie6</span><span class="p">)</span>
                    <span class="nx">pic</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">reallocalpath</span><span class="p">;</span> <span class="c1">//IE6浏览器设置img的src为本地路径可以直接显示图片</span>
               <span class="k">else</span> <span class="p">{</span> <span class="c1">//非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现，IE10浏览器不支持滤镜，需要用FileReader来实现，所以注意判断FileReader先</span>
                    <span class="nx">pic</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">filter</span> <span class="o">=</span> <span class="s2">"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\""</span>
                              <span class="o">+</span> <span class="nx">reallocalpath</span> <span class="o">+</span> <span class="s2">"\")"</span><span class="p">;</span>
                    <span class="nx">pic</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="s1">'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='</span><span class="p">;</span><span class="c1">//设置img的src为base64编码的透明图片，要不会显示红xx</span>
               <span class="p">}</span>
          <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">file</span><span class="p">.</span><span class="nx">files</span><span class="p">)</span> <span class="p">{</span><span class="c1">//firefox6-</span>
               <span class="k">if</span> <span class="p">(</span><span class="nx">file</span><span class="p">.</span><span class="nx">files</span><span class="p">.</span><span class="nx">item</span><span class="p">(</span><span class="mi">0</span><span class="p">))</span> <span class="p">{</span>
                    <span class="nx">url</span> <span class="o">=</span> <span class="nx">file</span><span class="p">.</span><span class="nx">files</span><span class="p">.</span><span class="nx">item</span><span class="p">(</span><span class="mi">0</span><span class="p">).</span><span class="nx">getAsDataURL</span><span class="p">();</span>
                    <span class="nx">pic</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">url</span><span class="p">;</span>
               <span class="p">}</span>
          <span class="p">}</span>
     <span class="p">}</span>
<span class="nt"></script></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
     <span class="nt"><form</span> <span class="na">name=</span><span class="s">"form1"</span> <span class="na">enctype=</span><span class="s">"multipart/form-data"</span><span class="nt">></span>
          <span class="nt"><table></span>
               <span class="nt"><tr></span>
                    <span class="nt"><td></span>草图1：<span class="nt"></td></span>
                    <span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">name=</span><span class="s">"file1"</span> <span class="na">id=</span><span class="s">"file1"</span>
                         <span class="na">onchange=</span><span class="s">"change('pic1','file1')"</span><span class="nt">></span>
                    <span class="nt"></td></span>
                    <span class="nt"><tr></span>
                         <span class="nt"><td></span>草图浏览1：<span class="nt"></td></span>
                         <span class="nt"><td><img </span alt="点上传之后怎么让图片显示在红色的框里，页面不跳?" > <span class="na">src=</span><span class="s">"images/px.gif"</span> <span class="na">id=</span><span class="s">"pic1"</span><span class="nt">></span>
                         <span class="nt"></td></span>
                    <span class="nt"></tr></span>
                    <span class="nt"><tr></span>
                         <span class="nt"><td></span>草图2：<span class="nt"></td></span>
                         <span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">name=</span><span class="s">"file2"</span> <span class="na">id=</span><span class="s">"file2"</span>
                              <span class="na">onchange=</span><span class="s">"change('pic2','file2')"</span><span class="nt">></span>
                         <span class="nt"></td></span>
                         <span class="nt"><tr></span>
                              <span class="nt"><td></span>草图浏览2：<span class="nt"></td></span>
                              <span class="nt"><td><img </span alt="点上传之后怎么让图片显示在红色的框里，页面不跳?" > <span class="na">src=</span><span class="s">"images/px.gif"</span> <span class="na">id=</span><span class="s">"pic2"</span><span class="nt">></span>
                              <span class="nt"></td></span>
                         <span class="nt"></tr></span>
          <span class="nt"></table></span>
     <span class="nt"></form></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
登录后复制
img.src = URL.createObjectURL(file) 使用fileReaderAPI读取为DataURL 建议换浏览器试试。 有一种技术名为ajax，异步刷新。你可以使用这种技术，ajax异步提交图片上传，然后把上传成功的路径以及文件名称返回json。然后在前台ajax的success方法里，获得返回json，然后把图片的路径替换img标签中的src，jquery替换方法：$("#imgId").attr('src',path); //path为路径。imgId为img标签的id. 直接可以用fex的web uploader
里面有规范说明，ui自定义，底层是jq，扩展性强 将上传后生成的图片地址，付给img的src. 上传图片了，后台肯定有接收到吧？后台接收到图片处理下 返回一个 文件名，然后你前台调用就好了嘛 你了用jq的上传插件
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

如何修复KB5055612无法在Windows 10中安装？
4 周前 By DDD
<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：种植花园 - 完整的突变指南
3 周前 By DDD
北端：融合系统，解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程
1671
14
CakePHP 教程
1428
52
Laravel 教程
1331
25
PHP教程
1276
29
C# 教程
1256
24
显示更多
Related knowledge
说明PHP中的安全密码散列（例如，password_hash，password_verify）。为什么不使用MD5或SHA1？ 说明PHP中的安全密码散列（例如，password_hash，password_verify）。为什么不使用MD5或SHA1？ Apr 17, 2025 am 12:06 AM

在PHP中，应使用password_hash和password_verify函数实现安全的密码哈希处理，不应使用MD5或SHA1。1)password_hash生成包含盐值的哈希，增强安全性。2)password_verify验证密码，通过比较哈希值确保安全。3)MD5和SHA1易受攻击且缺乏盐值，不适合现代密码安全。

PHP和Python：比较两种流行的编程语言 PHP和Python：比较两种流行的编程语言 Apr 14, 2025 am 12:13 AM

PHP和Python各有优势，选择依据项目需求。1.PHP适合web开发，尤其快速开发和维护网站。2.Python适用于数据科学、机器学习和人工智能，语法简洁，适合初学者。

PHP行动：现实世界中的示例和应用程序 PHP行动：现实世界中的示例和应用程序 Apr 14, 2025 am 12:19 AM

PHP在电子商务、内容管理系统和API开发中广泛应用。1)电子商务：用于购物车功能和支付处理。2)内容管理系统：用于动态内容生成和用户管理。3)API开发：用于RESTfulAPI开发和API安全性。通过性能优化和最佳实践，PHP应用的效率和可维护性得以提升。

PHP类型提示如何起作用，包括标量类型，返回类型，联合类型和无效类型？ PHP类型提示如何起作用，包括标量类型，返回类型，联合类型和无效类型？ Apr 17, 2025 am 12:25 AM

PHP类型提示提升代码质量和可读性。1)标量类型提示：自PHP7.0起，允许在函数参数中指定基本数据类型，如int、float等。2)返回类型提示：确保函数返回值类型的一致性。3)联合类型提示：自PHP8.0起，允许在函数参数或返回值中指定多个类型。4)可空类型提示：允许包含null值，处理可能返回空值的函数。

PHP的持久相关性：它还活着吗？ PHP的持久相关性：它还活着吗？ Apr 14, 2025 am 12:12 AM

PHP仍然具有活力，其在现代编程领域中依然占据重要地位。1)PHP的简单易学和强大社区支持使其在Web开发中广泛应用；2)其灵活性和稳定性使其在处理Web表单、数据库操作和文件处理等方面表现出色；3)PHP不断进化和优化，适用于初学者和经验丰富的开发者。

PHP和Python：解释了不同的范例 PHP和Python：解释了不同的范例 Apr 18, 2025 am 12:26 AM

PHP主要是过程式编程，但也支持面向对象编程（OOP）；Python支持多种范式，包括OOP、函数式和过程式编程。PHP适合web开发，Python适用于多种应用，如数据分析和机器学习。

您如何防止PHP中的SQL注入？ （准备的陈述，PDO） 您如何防止PHP中的SQL注入？ （准备的陈述，PDO） Apr 15, 2025 am 12:15 AM

在PHP中使用预处理语句和PDO可以有效防范SQL注入攻击。1)使用PDO连接数据库并设置错误模式。2)通过prepare方法创建预处理语句，使用占位符和execute方法传递数据。3)处理查询结果并确保代码的安全性和性能。

PHP和Python：代码示例和比较 PHP和Python：代码示例和比较 Apr 15, 2025 am 12:07 AM

PHP和Python各有优劣，选择取决于项目需求和个人偏好。1.PHP适合快速开发和维护大型Web应用。2.Python在数据科学和机器学习领域占据主导地位。

See all articles