javascript - 使用回形针上传 jQuery 文件，上传前显示预览图像

Question

我正在努力完成类似 this 的任务

尝试显示我要上传的图像的预览，但没有显示任何内容。我正在查看日志，当我尝试上传时，日志会吐出一些内容，主要是 Image Exists (0.2ms) 和 Image Load (0.3ms)，并显示 SELECT 1 AS.... SQL 语法

这是我的form.html.erb

<%= simple_form_for @photo, html: { multipart: true, id: 'bePhoto' } do |f| %>    
  <div class="row fileupload-buttonbar">
    <div class="col-lg-7">
        <!-- The fileinput-button span is used to style the file input field as button -->
        <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Add files...</span>
            <input type="file" name="photos[]" multiple>
        </span>
        <button type="submit" class="btn btn-primary start">
            <i class="glyphicon glyphicon-upload"></i>
            <span>Start upload</span>
        </button>
        <button type="reset" class="btn btn-warning cancel">
            <i class="glyphicon glyphicon-ban-circle"></i>
            <span>Cancel upload</span>
        </button>
        <button type="button" class="btn btn-danger delete">
            <i class="glyphicon glyphicon-trash"></i>
            <span>Delete</span>
        </button>
        <input type="checkbox" class="toggle">
        <!-- The global file processing state -->
        <span class="fileupload-process"></span>
    </div>

    <!-- The global progress state -->
    <div class="col-lg-5 fileupload-progress fade">
        <!-- The global progress bar -->
        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
            <div class="progress-bar progress-bar-success" style="width:0%;"></div>
        </div>
        <!-- The extended global progress state -->
        <div class="progress-extended">&nbsp;</div>
    </div>
</div>
<!-- The table listing the files available for upload/download -->

<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>

<% end %>

然后我有这个javascript

$(function () {
    $('#bePhoto').fileupload();

    $('#bePhoto').addClass('fileupload-processing');
      $.ajax({
          // Uncomment the following to send cross-domain cookies:
          //xhrFields: {withCredentials: true},
          url: $('#bePhoto').fileupload('option', 'url'),
          dataType: 'json',
          context: $('#beTripForm')[0]
      }).always(function () {
          $(this).removeClass('fileupload-processing');
      }).done(function (result) {
          $(this).fileupload('option', 'done')
              .call(this, $.Event('done'), {result: result});
    });    
});

我也有这个

<script src="http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<script src="http://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>

还有这个:

//= require jquery-fileupload/basic
//= require jquery-fileupload/basic-plus

我几乎尝试模仿示例演示，但不确定我是否正确执行此操作。

Answer 1

如果您关心的是在上传之前显示所选图像并在表单提交期间上传它们，我尝试为此编写自定义脚本。请查看并告诉我。

这里我读取输入文件内容并将其显示在图像标签中作为缩略图。它不显示文件上传的进度，但所有文件都在表单提交事件期间提交。

请添加一个 div 以在文件输入字段上方显示缩略图

    <div class="row" id="uploader-wrapper"></div>

    <%= f.file_field(:photo, id: 'photo_upload_btn', multiple: true) %>

并为您的文件输入字段添加事件监听器。

$("#photo_upload_btn").change(function () {
        displayThumbnail(this);
});

添加以下 Javasript 代码以显示缩略图

function displayThumbnail(input) {
        for( var i = 0;i<input.files.length;i++){
            if (input.files && input.files[i]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    if ($('#photo_upload_btn').valid()) {
                        var $newImageThumbnail = makeElement('img',{ class: "image-frame",src: e.target.result});
                        $('#uploader-wrapper').append($newImageThumbnail);
                    }
                };
                reader.readAsDataURL(input.files[i]);
            }
        }

    }

    function makeElement(element, options) {
        var $elem = document.createElement(element);
        $.each(options, function (key, value) {
            $elem.setAttribute(key, value);
        });
        return $elem;
    }

另外不要忘记设置缩略图的样式

.image-frame {
  border: 1px dashed #333;
  width: 150px;
  height: 150px;
  margin: 0 0 10px;
}