Question

我跟随jquery form plugin的示例，将图像异步上传到我的服务器。我只有一个按钮，＆＃39;添加照片＆＃39;按下来选择照片。然后发送到我的服务器以保存图像并在缩略图库中刷新下面的图像。我甚至需要一张表格吗？好像我没有因为我没有使用提交按钮，我在添加照片后提交。当我必须显示所有图像并用新图像刷新页面时，这会让我感到惊讶吗？只是好奇的反馈。这是我的html表单。

＆＃13;

<form id="imageform" enctype="multipart/form-data" >
  <input type="file" id="selectedFile" style="display: none;" />
  <input type="button" value="Add Photos" class="btn" id="pictureupload" />
</form>
<h1>Output Div (#output2):</h1>
<div id="output">AJAX response will replace this content.</div>

＆＃13;

这是我的javascript。

＆＃13;

$("#pictureupload").click(function () {
  document.getElementById('selectedFile').click();
});

$('#selectedFile').change(function() {
    var uploadImageUrl = $('#imageform').data('url');
    var options = {
        target: '#output',   // target element(s) to be updated with server response 
        beforeSubmit: showRequest,  // pre-submit callback 
        success: showResponse,  // post-submit callback 

        // other available options: 
        url:       '/ManageSpaces/UploadImage', //uploadImageUrl, //'/ManageSpaces/UploadImage',         // override for form's 'action' attribute 
        type:      'post'        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 

        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    };

    // bind to the form's submit event 
    //$('#imageform').submit(function () {
        // inside event callbacks 'this' is the DOM element so we first 
        // wrap it in a jQuery object and then invoke ajaxSubmit 
        $(this).ajaxSubmit(options);
        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
        //return false;
    //});
});

＆＃13;

Answer 1

您需要该表单，因为您使用它来发送文件，但如果您使用filesystem api并自行发送文件，则可以删除它。

如果您想在不使用表单的情况下上传文件，那么文件系统api上的hmtl5 rocks tutorial会很有用。

如果从文件输入按钮调用它，是.ajaxSubmit（）上必需的表单吗？

1 个答案: