Question

我是一个初学者，我正在尝试创建一个允许用户制作照片幻灯片的功能。他们使用以下代码上传图像并查看预览：

function photoPreview (input) {

    if (input.files && input.files[0]) {

        var reader = new FileReader();
        reader.onload = function (e) {
            $('.preview-photo').attr('src', e.target.result);

        }
        reader.readAsDataURL(input.files[0]);
    }
}

$('.photo-upload').change(function(){
    photoPreview(this);
})

然后点击“添加＆＃39;按钮将照片添加到预览div下方的图像队列。图像队列使用以下代码显示照片的快照：

var uploadSource = $('.preview-photo').attr('src');
$('#queue-container').append("<img class='snapshot-photo'" + "src='" + uploadSource + "'>");

最后，我尝试通过ajax发送所有照片。

for (i = 0; i < $('#queue-container').children('.snapshot-photo').length; i++) {
    var sourcevalue = $('#snapshot-container').children('.snapshot-photo:eq(' + i + ')').attr('src')
    var source = document.createElement('input');
    $(source).attr({
        type: 'file',
        name: 'photo_source_' + i,
        value: sourcevalue
    });
}

当我到达我的服务器端并尝试查看它是否已经使用文件系统时，它显示为未定义

fs.readFileSync(req.files.photo_source_0) // cannot read property of undefined

我知道这是一个很长的问题，但我真的需要帮助。如何让节点的文件系统识别文件？或者我的整个过程是错的？所有建议都表示赞赏。

Answer 1

您可以使用Uploadfiy，它有非常完整的选项，有两个版本，Flash版本（免费）和HTML5版本，您可以购买此版本。

我需要通过ajax上传多个图像

1 个答案: