php,ajax。如何做到无刷新上传图片啊,关键是无刷新而且是图片

php,ajax。如何做到无刷新上传图片啊,关键是无刷新而且是图片,第1张

最常见的做法有2种:

当选择一个文件后,用JS动态的信并创建一个Iframe,Iframe内写入一个隐藏的表单,然后让表单提交;

利用Flash来实现上传,但是敬坦销缺点是必须手动的亮游传递session_id,否则无法进行状态维护

1,页面需要嵌入iframe

src是你另一个php程序,比如upload.php

2.form

提交的时候提交到iframe

3.upload.php判唯亮姿卜断提交成功输出一段js代码,parent.document.getElemetById("指册宽PID").src="成功后的图片地址"

    <meta charset="utf-8" >  

        <form id= "uploadForm">    

              <p >指定文件名: <input type="text" name="filename" value= ""/></p >    

               <p>  

                 上传文件:   

                 <input type="file" name="photo" onchange="showPreview(this)" class="file" />  

                 <img id="portrait" src="" width="70" height="75">  

              </p>    

              <input type="button" value="上传" onclick="doUpload()" />    

        </form>    

        <script src="http://www.haoyunyun.cn/jquery.js"></script>  

        <script>  

        function doUpload() {    

             var formData = new FormData($( "#uploadForm" )[0])    

             $.ajax({    

                  url: 'submit.php' ,    

                  type: 'POST',    

                  data: formData,    

                  async: false,    

                  cache: false,    

                  contentType: false,    

                  processData: false,    

                  success: function (returndata) {    

                      alert(returndata)    

                  },    

     error: function (returndata) {    

                      alert(returndata)    

                  }    

             })    

   则巧埋     }    

  孙蚂      </script>  

        <script type="text/javascript">  

        function showPreview(source) {  

            var file = source.files[0]  

            if (window.FileReader) {  

                var fr = new FileReader()  

                fr.onloadend = function(e) {  

          宽羡          document.getElementById("portrait").src = e.target.result  

                }  

                fr.readAsDataURL(file)  

            }  

        }  

      </script> <?php  

    if($_FILES['photo']['error']>0){  

        echo "上传文件失败"  

        die  

    }  

    $dir='./photo/'  

    $type=substr($_FILES['photo']['name'],strrpos($_FILES['photo']['name'],'.'))  

    $filename=time().rand(1000,9999).$type  

    if(is_uploaded_file($_FILES['photo']['tmp_name'])){  

        move_uploaded_file($_FILES['photo']['tmp_name'],$dir.$filename)  

        echo "上传成功"  

    }else{  

        echo "上传文件失败"  

    }


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/12260216.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-24
下一篇 2023-05-24

发表评论

登录后才能评论

评论列表(0条)

保存