上传文件以通过html表单解析

Question

我试图让用户填写表格并上传照片。我希望所有这些信息都存储在我的解析数据库中。我的表格可以正常工作，现在我需要包含文件上传。我也在用 express.js 创建这个。

这是我的 .ejs 文件，格式为

<div id="result"></div>

<form action="/" id="filter-form" >

    <P>
    Upload your filter!
    <input type="file" id="uploadfilter" required>
    <img id="yourfilter" src="#" >
    </P>    



    <p>
    <input type="text" name="name" placeholder="Name" id="username" required>
    </p>

    <p>

    <input type="email" name="email" placeholder="Email" id="email" required>
    </p>

    <p>
    <textarea name="comments" id="comments" placeholder ="Additional comments" required></textarea>
    </p>

    <p>
    <input type="checkbox" style="position: relative; left:0; visibility: visible;" required > I agree that this is my own work and does not contain logos or trademarks and I have read the Submission Guidelines
    </p> 

    <p>
    <input type="checkbox" style="position: relative; left:0; visibility: visible;" required > I agree to the Privacy Policy and Submission Agreement of the Smart Filters submission tool.
    </p> 

    <p>
    <input type="submit" value="Submit Filter">
    </p>


</form>

这也是 .ejs 文件中的 javascript。

<script type="text/javascript">

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#yourfilter').attr('src', e.target.result);
        }

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

$("#uploadfilter").change(function(){
    readURL(this);
});

jQuery(function($){

    $('#filter-form').submit(function(event) {

        event.preventDefault();

          // Get some values from elements on the page:
         var $form = $(this);
         var name = $form.find("#username").val();
         var email = $form.find("#email").val();
         var comments = $form.find("#comments").val();
         var url = $form.attr("action");



        var data = {
            "name": name,
            "email": email, 
            "comments": comments,
            "filterfile": parseFile,
        };

        var posting = $.post(url, data);

        posting.done(function (data) {
            //var data = JSON.parse(data);
            var content = "<b>"+data.message+"</b>";
            $("#result").empty().append(content);
        });

        posting.fail(function (data) {
            //var data = JSON.parse(data);
            var content = data.message;
            $("#result").empty().append(content);
        });

    });

});

这是 app.post 中的 app.js 代码。

    app.post('/*', function (req, res) {

    console.log('I AM HERE!');
    console.log("PARAMS:")
    console.log(req.params);
    console.log("BODY:");
    console.log(req.body);

    var data = req.body;

    if ((tryParseJSON(data) != false) || (!data.hasOwnProperty('name')) || (!data.hasOwnProperty('email')) || (!data.hasOwnProperty('comments'))) {
        return res.json({"message" : "Invalid parameters!", "status" : 200});
    }

    var newFilter = Parse.Object.extend("FilterSubmit");
    var newfilter = new newFilter();


    newfilter.set("name", data.name);
    newfilter.set("email", data.email);
    newfilter.set("comments", data.comments);
    newfilter.set("filterfile", data.parseFile);

    var FilterSave = newfilter.save();

    return Parse.Promise.when([FilterSave]).then(function (FilterSubmit) {

        console.log("Filter Saved!");
        return res.json({"status" : 400, "message" : "Filter Saved! Thank you "+data.name+"!"});

    }, function (error) {

        console.log("Save error!");
        console.log(error);
        return res.json({"message" : "Save error!", "status" : 200});

    });

});

function tryParseJSON (jsonString){
    try {
        var o = JSON.parse(jsonString);

        // Handle non-exception-throwing cases:
        // Neither JSON.parse(false) or JSON.parse(1234) throw errors, hence the type-checking,
        // but... JSON.parse(null) returns 'null', and typeof null === "object", 
        // so we must check for that, too.
        if (o && typeof o === "object" && o !== null) {
            return o;
        }
    }
    catch (e) { }

    return false; };

当它只是文本输入时，这个表单可以完美地工作。当我包含文件输入时它停止提交（可能是因为我还没有完全实现它）。我现在只需要让文件上传也可以使用它。我不确定如何连接它们或从哪里开始。任何帮助将不胜感激:)

Answer 1

您的表单无法以您的方式发送文件或图像： 您的表单需要设置属性“enctype”。

<form action="/" id="filter-form" method="post" enctype="multipart/form-data">.