带有回形针的jQuery文件上传，在上传之前显示预览图像

Question

我试图做到像这样

尝试显示我要上传的图像的预览，但没有任何显示。 我正在查看我的日志，当我尝试上传时，该日志吐出了一些东西，主要是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;
}