종이 클립으로 jQuery 파일 업로드, 업로드 전 미리보기 이미지 표시

안녕하세요

내가 좋아하는 달성하기 위해 노력하고있어

여기에 이미지 설명 입력

업로드하려는 이미지의 미리보기를 표시하려고하는데 아무것도 표시되지 않습니다. 내 로그를보고 있고 업로드하려고 할 때 로그가 대부분 Image Exists (0.2ms)및을 뱉어 내고 SQL 구문을 Image Load (0.3ms)표시 SELECT 1 AS....합니다.

이것은 내 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 %>

그런 다음이 자바 스크립트가 있습니다.

$(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

샘플 데모를 모방하려고했지만 제대로하고 있는지 잘 모르겠습니다.

비벡 샤르마

업로드하기 전에 선택한 이미지를 표시하고 양식 제출 중에 업로드하는 것이 우려되는 경우 사용자 지정 스크립트를 작성하려고했습니다.

여기서는 입력 파일 내용을 읽어서 이미지 태그에 썸네일로 표시합니다. 파일 업로드 진행 상황은 표시되지 않지만 모든 파일은 양식 제출 이벤트 중에 제출됩니다.

파일 입력 필드 바로 위에 썸네일 이미지를 표시하려면 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;
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

업로드 전에 미리보기 이미지 표시

분류에서Dev

업로드 스크립트 전 jQuery 이미지 미리보기

분류에서Dev

jQuery 파일 업로드 미리보기 / 이미지 제거

분류에서Dev

yii 프레임 워크에서 여러 파일 업로드, 이미지 저장 전에 미리보기 표시

분류에서Dev

업로드하기 전에 이미지 미리보기 시도

분류에서Dev

업로드 전 AngularJS 이미지 미리보기 선택 이전 이미지 표시

분류에서Dev

이미지 업로드 및 미리보기 표시

분류에서Dev

업로드하기 전에 이미지의 파일 이름 가져 오기-JQuery

분류에서Dev

codeigniter 3에서 안전한 업로드 및 이미지 또는 파일 표시

분류에서Dev

업로드하기 전에 이미지를 미리 보시겠습니까?

분류에서Dev

업로드하기 전에 이미지 미리보기 삭제

분류에서Dev

업로드하기 전에 많은 이미지 미리보기

분류에서Dev

ReactJS : 업로드 전에 여러 이미지 미리보기

분류에서Dev

업로드 전에 이미지 미리보기를 표시하는 방법은 무엇입니까?

분류에서Dev

angularjs에서 파일 업로드 및 이미지 표시

분류에서Dev

C ++로 이미지 파일 업로드

분류에서Dev

미리보기 이미지 표시, 제출 양식에 업로드

분류에서Dev

내 그리드보기에 표시되지 않는 업로드 된 이미지

분류에서Dev

JQuery 파일 업로드 미들웨어-이미지 버전이 생성되지 않음

분류에서Dev

파일 업로드 이미지 전용 정규식-opencart

분류에서Dev

종이 클립 업로드 yml 파일

분류에서Dev

업로드하기 전에 미리보기에서 이미지 선택

분류에서Dev

폰갭에 업로드하기 전에 이미지 미리보기

분류에서Dev

Cypress 파일 업로드 (이미지 / jpeg)

분류에서Dev

이미지 파일 업로드 문제

분류에서Dev

파일을 업로드하는 동안 로딩 이미지 표시

분류에서Dev

echo 문으로 업로드 된 이미지의 전체 URL 표시

분류에서Dev

마지막으로 업로드 한 이미지 미리보기

분류에서Dev

jQuery 파일 업로드 미리보기 확인

Related 관련 기사

  1. 1

    업로드 전에 미리보기 이미지 표시

  2. 2

    업로드 스크립트 전 jQuery 이미지 미리보기

  3. 3

    jQuery 파일 업로드 미리보기 / 이미지 제거

  4. 4

    yii 프레임 워크에서 여러 파일 업로드, 이미지 저장 전에 미리보기 표시

  5. 5

    업로드하기 전에 이미지 미리보기 시도

  6. 6

    업로드 전 AngularJS 이미지 미리보기 선택 이전 이미지 표시

  7. 7

    이미지 업로드 및 미리보기 표시

  8. 8

    업로드하기 전에 이미지의 파일 이름 가져 오기-JQuery

  9. 9

    codeigniter 3에서 안전한 업로드 및 이미지 또는 파일 표시

  10. 10

    업로드하기 전에 이미지를 미리 보시겠습니까?

  11. 11

    업로드하기 전에 이미지 미리보기 삭제

  12. 12

    업로드하기 전에 많은 이미지 미리보기

  13. 13

    ReactJS : 업로드 전에 여러 이미지 미리보기

  14. 14

    업로드 전에 이미지 미리보기를 표시하는 방법은 무엇입니까?

  15. 15

    angularjs에서 파일 업로드 및 이미지 표시

  16. 16

    C ++로 이미지 파일 업로드

  17. 17

    미리보기 이미지 표시, 제출 양식에 업로드

  18. 18

    내 그리드보기에 표시되지 않는 업로드 된 이미지

  19. 19

    JQuery 파일 업로드 미들웨어-이미지 버전이 생성되지 않음

  20. 20

    파일 업로드 이미지 전용 정규식-opencart

  21. 21

    종이 클립 업로드 yml 파일

  22. 22

    업로드하기 전에 미리보기에서 이미지 선택

  23. 23

    폰갭에 업로드하기 전에 이미지 미리보기

  24. 24

    Cypress 파일 업로드 (이미지 / jpeg)

  25. 25

    이미지 파일 업로드 문제

  26. 26

    파일을 업로드하는 동안 로딩 이미지 표시

  27. 27

    echo 문으로 업로드 된 이미지의 전체 URL 표시

  28. 28

    마지막으로 업로드 한 이미지 미리보기

  29. 29

    jQuery 파일 업로드 미리보기 확인

뜨겁다태그

보관