After clicking upload, how can I make the image display in the red box without the page jumping?-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

After clicking upload, how can I make the image display in the red box without the page jumping?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 29, 2016 pm 04:09 PM

Reply content:

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="After clicking upload, how can I make the image display in the red box without the page jumping?" > <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="After clicking upload, how can I make the image display in the red box without the page jumping?" > <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) Read as DataURL using fileReaderAPI It is recommended to try changing the browser. There is a technology called ajax, asynchronous refresh. You can use this technology to asynchronously submit the image upload via ajax, and then return the successful upload path and file name to json. Then in the success method of the front-end ajax, get the returned json, and then replace the src in the img tag with the path of the image. The jquery replacement method: $("#imgId").attr('src',path); //path is path. imgId is the id of the img tag. You can directly use fex's web uploader
which has specifications, ui customization, the bottom layer is jq, and has strong scalability. Pay the image address generated after uploading to img's src. I uploaded the picture. It must have been received in the background, right? After the image is received and processed in the background, a file name is returned, and then you can just call it in the foreground. You can use jq's upload plug-in

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is the best way to send an email using PHP?May 08, 2025 am 12:21 AM

ThebestapproachforsendingemailsinPHPisusingthePHPMailerlibraryduetoitsreliability,featurerichness,andeaseofuse.PHPMailersupportsSMTP,providesdetailederrorhandling,allowssendingHTMLandplaintextemails,supportsattachments,andenhancessecurity.Foroptimalu

Best Practices for Dependency Injection in PHPMay 08, 2025 am 12:21 AM

The reason for using Dependency Injection (DI) is that it promotes loose coupling, testability, and maintainability of the code. 1) Use constructor to inject dependencies, 2) Avoid using service locators, 3) Use dependency injection containers to manage dependencies, 4) Improve testability through injecting dependencies, 5) Avoid over-injection dependencies, 6) Consider the impact of DI on performance.

PHP performance tuning tips and tricksMay 08, 2025 am 12:20 AM

PHPperformancetuningiscrucialbecauseitenhancesspeedandefficiency,whicharevitalforwebapplications.1)CachingwithAPCureducesdatabaseloadandimprovesresponsetimes.2)Optimizingdatabasequeriesbyselectingnecessarycolumnsandusingindexingspeedsupdataretrieval.

PHP Email Security: Best Practices for Sending EmailsMay 08, 2025 am 12:16 AM

ThebestpracticesforsendingemailssecurelyinPHPinclude:1)UsingsecureconfigurationswithSMTPandSTARTTLSencryption,2)Validatingandsanitizinginputstopreventinjectionattacks,3)EncryptingsensitivedatawithinemailsusingOpenSSL,4)Properlyhandlingemailheaderstoa

How do you optimize PHP applications for performance?May 08, 2025 am 12:08 AM

TooptimizePHPapplicationsforperformance,usecaching,databaseoptimization,opcodecaching,andserverconfiguration.1)ImplementcachingwithAPCutoreducedatafetchtimes.2)Optimizedatabasesbyindexing,balancingreadandwriteoperations.3)EnableOPcachetoavoidrecompil

What is dependency injection in PHP?May 07, 2025 pm 03:09 PM

DependencyinjectioninPHPisadesignpatternthatenhancesflexibility,testability,andmaintainabilitybyprovidingexternaldependenciestoclasses.Itallowsforloosecoupling,easiertestingthroughmocking,andmodulardesign,butrequirescarefulstructuringtoavoidover-inje

Best PHP Performance Optimization TechniquesMay 07, 2025 pm 03:05 PM

PHP performance optimization can be achieved through the following steps: 1) use require_once or include_once on the top of the script to reduce the number of file loads; 2) use preprocessing statements and batch processing to reduce the number of database queries; 3) configure OPcache for opcode cache; 4) enable and configure PHP-FPM optimization process management; 5) use CDN to distribute static resources; 6) use Xdebug or Blackfire for code performance analysis; 7) select efficient data structures such as arrays; 8) write modular code for optimization execution.

PHP Performance Optimization: Using Opcode CachingMay 07, 2025 pm 02:49 PM

OpcodecachingsignificantlyimprovesPHPperformancebycachingcompiledcode,reducingserverloadandresponsetimes.1)ItstorescompiledPHPcodeinmemory,bypassingparsingandcompiling.2)UseOPcachebysettingparametersinphp.ini,likememoryconsumptionandscriptlimits.3)Ad

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks agoByDDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks agoByDDD

Roblox: Grow A Garden - Complete Mutation Guide

2 weeks agoByDDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks agoByDDD

Hot Tools

Dreamweaver Mac version

Visual web development tools

WebStorm Mac version

Useful JavaScript development tools

Dreamweaver CS6

Visual web development tools

SublimeText3 English version

Recommended: Win version, supports code prompts!

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

Hot Topics

1663

1420

1313

1266

1238