Question

这样可以正常形式使用：

<form id="frm1" enctype="multipart/form-data" action="form_handler_post.php" method="POST">
    <input type="hidden" name="MAX_FILE_SIZE" value="300000" />     
    Send this file: <input name="userfile" type="file" />
    <input type="text" name="theRefNum" />
    <input type="submit" value="Send File" />
</form>

...但是我想使用jQuery发布表单的内容（即图像），因为我有很多其他数据我想要同时发布并且不想将它包含在与图像上传相同的形式。 E.g。

$.post("form_handler_post.php", { name: "John", time: "2pm", otherData: "Friday", image:#######});

我已尝试image:userfile，image:'userfile'和image:$('userfile').val()，但无济于事。

如何在数据部分中包含图像文件 - 即如何访问图像的value？

Answer 1

使用普通的ajax无法做到这一点。你必须使用一些可用的插件。大多数插件在后端使用iframe。请参阅此http://jquerybyexample.blogspot.com/2012/08/5-best-jquery-file-upload-plugin.html

Answer 2

$("input[name='userfile']").on("change", function(){
    readURL($(this).get(0));
})
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('.somepicholder img').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

Answer 3

您需要将文件提交给iframe，因为您无法通过jQuery中的AJAX提交文件：

$('#frm1 input[type="submit"]').click(function(e) {
    /* Prevent this from submitting the form */
    e.preventDefault();

    /* Create an iframe. */
    var iframeName = "iframe" + (new Date()).getTime(),
        iframe = $('<iframe id="' + iframeName  + '" name="' + iframeName  + '"></iframe>');

    /* Add the iframe to the page and hide it. */
    $(this).append(iframe);
    $(iframe).hide();

    /* Set the form's target to point to the iframe. */
    $(this).attr({
        "action": "mypage.ext",
        "method": "post",
        "enctype": "multipart/form-data",
        "encoding": "multipart/form-data",
        "target": iframeName  
    });

    /* Call the modified form's submit function. */
    $(this).submit();
})

此代码在页面上创建一个iframe，并确保它具有唯一的ID和名称。然后它将表单提交给隐藏的iframe。

然后，您可以使用iframe的onload函数回调父页面（假设它位于同一个域中）。使用类似window.parent.parentFunction("Successfully uploaded!")的内容。

如何在不使用表单提交按钮的情况下发布使用<input type =“file”/>上传的图像？

3 个答案: