5
내 레일 애플리케이션에 Blueimp jQuery File Upload을 사용했습니다. 사용자가 파일을 선택하면 파일을 서버에 업로드하기 전에 이미지의 축소판 및 이미지 이름을 표시하려고합니다.Blueimp Jquery 파일 업로드 : 썸네일 미리보기 이미지가 표시되지 않습니다.
이 플러그인을 사용자 정의하려면 demo을 참조했습니다. 파일 이름을 화면에 인쇄 할 수 있지만 미리보기 이미지를 표시 할 수 없습니다. 여기
내가 파일을 선택한 후 생성 된 HTML을 비교 생성 된 HTML<!DOCTYPE html>
<html>
<head>
<title>Fileupload</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.fileupload-ui.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.widget.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.tmpl.js?body=1" type="text/javascript"></script>
<script src="/assets/load-image.min.js?body=1" type="text/javascript"></script>
<script src="/assets/canvas-to-blob.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.fileupload.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.fileupload-fp.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.fileupload-ui.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="Akp8GLPQ+DlFYI1g3CUA71hk0vg3G84aVwcVRHTlRUY=" name="csrf-token" />
</head>
<body>
<div class="files">
<form action="/users" class="upload" id="fileupload" method="post">
<input id="user_photo" name="user[photo]" type="file" />
<div>Upload files</div>
</form>
<table class="upload_files"></table>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-jquery-tmpl">
<tr class="template-upload fade">
<td class="preview"><span class="fade"></span></td>
<td class="name"><span>${name}</span></td>
</tr>
</script>
<script type="text/javascript" charset="utf-8">
$(function() {
$('#fileupload').fileupload({
add: function (e, data) {
console.log('add');
$.each(data.files, function (index, file) {
console.log('Added file: ' + file.name);
//alert($('#tmpl-demo').tmpl(data));
$('#template-upload').tmpl(data.files).appendTo('.upload_files');
});
var jqXHR = data.submit()
.success(function (result, textStatus, jqXHR) {/* ... */})
.error(function (jqXHR, textStatus, errorThrown) {/* ... */})
.complete(function (result, textStatus, jqXHR) {
console.log("complete");
//$('.upload_files').append('<tr><td>'+ result +'</td></tr>');
});
},
progress: function (e, data) {
console.log('progress');
},
start: function (e) {
console.log('start');
},
done: function (e) {
console.log('done');
}
}).bind('fileuploadadd', function (e, data) {
console.log('fileuploadadd');
}).bind('fileuploadprogress', function (e, data) {
console.log('fileuploadprogress');
}).bind('fileuploadstart', function (e) {
console.log('fileuploadstart');
}).bind('fileuploaddone', function (e) {
console.log('fileuploaddone');
});
});
</script>
</body>
</html>
입니다. 유일한 차이점은 요소가 내 애플리케이션에 누락 된 <td class="preview"><span class="fade"></span></td> 내에 있다는 것입니다.
구성 문제가있는 것 같습니다. 디스크에서 이미지를 선택하자마자 미리보기 이미지를 표시하도록 설정하는 데 도움을 주시겠습니까?
감사합니다. jquery.fileupload-ui.js를 사용하고 약간의 수정을 통해 요구 사항을 충족 시켰습니다. 감사. 좋은 모습을 보여 주면 github에서 데모 응용 프로그램을 공유 할 것입니다. –