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

回复内容：

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>
Salin selepas log masuk

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的上传插件