Question

我正在创建一个上传图片的网页。目前工作正常。我的意思是图像可以在服务器上传。

问题是我想在网页上显示上传的图片。以下是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

看起来文件名来自服务器，但我不知道如何使用它在网页上显示。

Answer 1

如果

"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');
            });
        },

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

1 个答案: