내가 좋아하는 달성하기 위해 노력하고있어 이
업로드하려는 이미지의 미리보기를 표시하려고하는데 아무것도 표시되지 않습니다. 내 로그를보고 있고 업로드하려고 할 때 로그가 대부분 Image Exists (0.2ms)
및을 뱉어 내고 SQL 구문을 Image Load (0.3ms)
표시 SELECT 1 AS....
합니다.
<%= 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"> </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] 삭제
몇 마디 만하겠습니다