通过ajax php在网页上显示上传的图片


show uploaded image on webpage by ajax php

我正在创建一个网页来上传图像。目前运行良好。我的意思是图像可以上传到服务器上。

问题是我想在网页上显示上传的图片。下面是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#bg1src设置为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');
            });
        },