이미지를 업로드 할 웹 페이지를 만들고 있습니다. 현재 잘 작동하고 있습니다. 이미지를 서버에 업로드 할 수 있음을 의미합니다.
문제는 웹 페이지에 업로드 된 이미지를 표시하고 싶습니다. 다음은 Ajax 코드입니다.
$(function () {
$("#progress").hide();
'use strict';
var url = 'emp_upload_file.php';
$('#fileuploader').fileupload({
add: function(e, data) {
var uploadErrors = [];
var acceptFileTypes = /^image\/(jpe?g|png)$/i;
if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
uploadErrors.push('Please choose jpg or png file. ');
}
if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 500000) {
uploadErrors.push('Filesize is too big. ');
}
if(uploadErrors.length > 0) {
alert(uploadErrors.join("\n"));
} else {
data.submit();
}
},
url: url,
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) {
$("#progress").show();
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
alert('Image uploaded successfully. It will refresh automatically.');
}
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
이전 이미지를 표시하는 순간 이미지가 표시되는 위치입니다. 페이지로드 중에 데이터베이스에서 가져 왔습니다.
<img id="bg1" src="files/<?php echo $big_logo;?>" class="simples-img1">
이미지 업로드 후 서버의 JSON 데이터
"files":[{"name":"472a37f6225c49a1febfb3b52100d77f1.png","size":93032,"type":"image\/png","title":null
파일 이름이 서버에서 오는 것 같지만 웹 페이지에 표시하는 데 어떻게 사용할 수 있는지 모르겠습니다.
만약
"name":"472a37f6225c49a1febfb3b52100d77f1.png"
이미지 파일의 경로입니까? 당신은 사용할 수 있습니다 .attr()에 :done(function() {})세트에 src의 img#bg1에data.result.files[0].name
done: function (e, data) {
$("#bg1").attr("src", "files/" + data.result.files[0].name);
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다