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

Reply content:

<code class="language-html">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> <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> <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>
</code>Copy after login

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