我正在创建一个网页来上传图像。目前运行良好。我的意思是图像可以上传到服务器上。
问题是我想在网页上显示上传的图片。下面是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"
是图像文件的路径吗?可以在:done(function() {})
处使用.attr()
将img#bg1
的src
设置为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');
});
},