Tôi đã sử dụng Blueimp jQuery File Upload trong ứng dụng Rails của mình. Khi người dùng chọn tệp, tôi muốn hiển thị hình thu nhỏ của hình ảnh và tên của hình ảnh trước khi tải tệp lên máy chủ.Tải lên tệp Blueimp Jquery: Không hiển thị hình ảnh xem trước hình thu nhỏ
Tôi đã giới thiệu demo để tùy chỉnh plugin này. Tôi có thể in tên của tệp trên màn hình nhưng không thể hiển thị hình thu nhỏ.
Đây là html tạo
<!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>
tôi so sánh html tạo ra sau khi chọn các tệp. Sự khác biệt duy nhất là ứng dụng demo có phần tử <canvas height="72" width="80"></canvas> trong phạm vi <td class="preview"><span class="fade"></span></td> bị thiếu trong ứng dụng của tôi.
Dường như một số vấn đề về cấu hình. Có ai vui lòng giúp tôi định cấu hình đúng cách để hiển thị hình thu nhỏ ngay khi người dùng chọn hình ảnh từ đĩa không?
Cảm ơn. Tôi đã sử dụng jquery.fileupload-ui.js và tinh chỉnh một chút để phù hợp với yêu cầu của tôi. Cảm ơn. Tôi sẽ chia sẻ các ứng dụng demo trên github một khi nó là trong hình dạng tốt. –