Question

我正在使用jQuery文件上传，并且工作正常。但是进度条只是加载而且大部分时间它都会结束但文件不会上传完成。

任何人都可以帮助我在进度条上实现百分比吗？它上传时会显示上传完成的文字。以下是我的工作代码。选择图像

                      <!-- The file input field used as target for the file upload widget -->
                      <input id="fileupload" type="file" name="files[]" class="coverimage" multiple>
                      <input type="hidden" id="img_name" class="img_name">
                    </span><br><b>  Recommended image size is 411 by 391, else image will be resized automatically.</b>
                    <br>
                    <br>
                    <!-- The global progress bar -->
                  </div>
                  </div>
                  <div id="progress" class="progress">
                    <div class="progress-bar progress-bar-success"></div>

              </div>
              <div id="pUploadMessage"> </div>
              <font color="#FF0000"> (Please Don’t save until image name appears!) </font>
                <!-- The container for the uploaded files -->
                <div id="files" class="files"></div> <br>



                          <script>


                    $(function () {
                        'use strict';
                        // Change this to the location of your server-side upload handler:
                        var url = window.location.hostname === 'clive.org' ?
                                    '//http://tripplegee.ng/admin/' : 'server/php/';
                        $('#fileupload').fileupload({
                            url: url,
                            dataType: 'json',
                            done: function (e, data) {
                                $.each(data.result.files, function (index, file) {
                                    $('<p/>').text(file.name).appendTo('#files');
                                    $('#img_name').val(file.name);
                                });
                            },
                            progressall: function (e, data) {
                                var progress = parseInt(data.loaded / data.total * 100, 10);
                                $('#progress .progress-bar').css(
                                    'width',
                                    progress + '%'
                                );
                            }
                        }).prop('disabled', !$.support.fileInput)
                            .parent().addClass($.support.fileInput ? undefined : 'disabled');
                    });
                    </script>



                    <script type="text/javascript">
                    // this is where the script that would process the input goes to 


                    $(document).ready(function($){
                        images = new Array();
                        $(document).on('change','.coverimage',function(){
                             files = this.files;
                             $.each( files, function(){
                                 file = $(this)[0];
                                 if (!!file.type.match(/image.*/)) {
                                     var reader = new FileReader();
                                     reader.readAsDataURL(file);
                                     reader.onloadend = function(e) {
                                        img_src = e.target.result; 
                                        html = "<img class='img-thumbnail' style='width:500px; height:300px ;margin-left:50px; margin-bottom:20px;' src='"+img_src+"'>";
                                        $('#files').html( html );
                                     };
                                 } 
                            });
                        });
                    });

                        </script>

Answer 1

您是否尝试使用回调“进度”？我将在下面举例说明。

//

如何将百分比进度放入blue imp jQuery上传？

1 个答案: