使用进度条上传文件


                    

我创建此代码以使用ajax和php上传文件,我想添加
进度条以显示上传百分比。</ p>

这是我的代码</ p>

  <br>
    $(“ form#data”)。submit(function(){<br>
     var formData = new FormData($(this)[0]);<br>
     $ .ajax({<br>
         网址:“ functions / video.php”,<br>
         输入:“ POST”,<br>
         数据:formData,<br>
         异步:错误,<br>
         成功:功能(数据){<br>
             document.getElementById(“ status”)。innerHTML = data;<br>
         },<br>
         快取:false,<br>
         contentType:false,<br>
         processData:否<br>
     });<br>
     返回false;<br>
 });<br>
 &lt;/ script&gt;<br>
 <form id =“ data” method =“ post” enctype =“ multipart / form-data”><br>
 <input name =“ up_vid” type =“ file” id =“ up_vid” /><br>
 <div class =“ upload_v_icon”> &lt;/ div&gt;<br>
 <div class =“ video_info”><br>
     <input type =“ text” name =“ video_title”占位符=“视频标题” /><br>
     <input type =“ text” name =“ tags” placeholder =“ funny,9gag,nice,crazy ...” /><br>
     <textarea name =“ description” placeholder =“ Description”> &lt;/ textarea&gt;<br>
     &lt;/ div&gt;<br>
     <div class =“ bg_upload”><br>
     <p>上传此视频时,表示您同意<a href="">服务条款</a>。&lt;/ p&gt;<br>
     <button>开始上传&lt;/ button&gt;<br>
     &lt;/ div&gt;<br>
 &lt;/ form&gt;<br>
 &lt;/ code&gt; &lt;/ pre&gt;</p>

<p><p>谢谢。&lt;/ p&gt;<br>
     &lt;/ div&gt;</p>

展开原文

原文

I create this code to upload file usin ajax and php and I want to add progress bar to show percent of upload.

this my code

<script>
   $("form#data").submit(function(){
    var formData = new FormData($(this)[0]);
    $.ajax({
        url: "functions/video.php",
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            document.getElementById("status").innerHTML = data;
        },
        cache: false,
        contentType: false,
        processData: false
    });
    return false;
});
</script>
<form id="data" method="post" enctype="multipart/form-data">
<input name="up_vid" type="file" id="up_vid"/>
<div class="upload_v_icon"></div>
<div class="video_info">
    <input type="text" name="video_title" placeholder="Video title" />
    <input type="text" name="tags" placeholder="funny,9gag,nice,crazy ..."/>
    <textarea name="description" placeholder="Description"></textarea>
    </div>
    <div class="bg_upload">
    <p>When you upload this video your are agree with <a href="">Terms</a> of service.</p>
    <button>Begin Upload</button>
    </div>
</form>

Thank you.

1个回答


这假定存在一个称为“ progress.gif”的1像素宽的gif。 将此颜色设置为您希望进度条显示的颜色。</ p>

向您的CSS添加这样的内容:</ p>

  .uploadBar {
    background-image:url(/images/progress.gif);
    背景位置:-1px;
    背景重复:不重复;
    背景尺寸= 0%100%; 宽度:100%;
    职位:相对 溢出:隐藏;
}
</ code> </ pre>

在您的$ .ajax()中添加类似的内容</ p>

  xhr:function(){
    var xhr = new window.XMLHttpRequest();
    //上传进度
    xhr.upload.addEventListener(“ progress”,function(evt){
       如果(evt.lengthComputable){
       var percentComplete = evt.loaded / evt.total;
       console.log(percentComplete);
       $('。uploadBar')。css({backgroundSize:(percentComplete * 100)+'%'});
       }
    },错误);
    返回xhr;
    }
</ code> </ pre>
     </ div>

展开原文

原文

This assumes a 1px wide gif called "progress.gif" is present. Set the color of this to the color you want your progress bar to appear.

Add something like this to your css:

.uploadBar {
   background-image:url(/images/progress.gif);
   background-position: -1px;
   background-repeat:no-repeat;
   background-size=0% 100%; width:100%;
   position: relative; overflow: hidden;
}

Add something like this to your $.ajax();

xhr: function() {
   var xhr = new window.XMLHttpRequest();
   //Upload progress
   xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
      var percentComplete = evt.loaded / evt.total;
      console.log(percentComplete);
      $('.uploadBar').css({ backgroundSize: (percentComplete*100) + '%'});
      }
   }, false);
   return xhr;
   }

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐