Question

在express.js应用程序中，我有一个带有一些字段的表单，其中有一个上传图片字段。

当用户浏览他的图像文件并选择一个时，我想在＆＃34;预览块中显示该文件＆＃34;在表单提交之前。

我想到了这些行动：

点击浏览按钮
选择文件
已选择文件=＆gt;上传，重命名，调整大小，裁剪并将其存储在/tmp目录
在预览栏中显示新文件
表单验证=＆gt;将重命名的文件移动到相应的应用程序目录中

我正在寻找实现这一过程的最佳方式。

Answer 1

解决此问题的步骤。

在HTML文件中使用输入类型文件。

<input id="upload_images" type="file" multiple="multiple">

将事件侦听器添加到输入类型文件的change事件中。

if(document.addEventListener) {
    document.getElementById("upload_images").addEventListener("change", function(e){
        uploadImages(e);
    });
}
else {
    document.getElementById("upload_images").attachEvent("onchange", function(e){
        uploadImages(e);
    });
}

当用户选择文件时，创建表单数据并使用ajax将其发送到服务器（Mutipart Data）。

function uploadImages(e) {
    var uploadedFiles = e.target.files;
    var xhrObj = new XMLHttpRequest();
    xhrObj.open('POST', "<<your node>>/<<request URI>>", true);
    xhrObj.onreadystatechange = function () {
        if(this.readyState == this.DONE) {
            if(this.status != 200) {
                // Show Error
            }
            else {
                var returnedResponse = xhrObj.responseText;
                if(returnedResponse == 'success') { // check your returned data like I was returning "success"
                    // Success - Do the tasks
                }
            }
        }
    };
    var requestFormData = new FormData();
    for(var i=0; i<uploadedFiles.length; i++) {
        requestFormData.append('data', uploadedFiles[i]);
    }
    xhrObj.send(requestFormData);
}

在服务器（nodejs）上使用强大的来接收上传的文件/文件，并将其存储在任何您想要的位置。

// require formidable
// require imagemagick
function processUploadImages(req, res) {
    var form = new formidable.IncomingForm();
    form.uploadDir = __dirname+'/uploaded_images/;
    form.maxFieldsSize = 20 * 1024 * 1024;
    form.keepExtensions = true;
    form.onPart = function(part) {
        form.handlePart(part);
    }
    form.on('file', function(name, file) {
        // Handle file data like:
        // file.path
        // file.name
    });
    form.on('end', function() {
        //show complete
    });
    form.parse(req, function(error, fields, files) {
        // create thumbnail images
        // return response
    });    
}

在服务器（nodejs）上使用 imagemagick 创建缩略图图像，并将其存储在可位于任何位置的文件夹中。
在回复中发回保存的（图片和缩略图）链接。
创建图片代码并在src代码中使用这些链接。

使用node.js预览上传的图像文件

1 个答案: