Question

基本上我使用html表单在服务器上上传图片。以下是我的表格代码：

<div class="modal modal-fixed-footer" id="modal-image">
<div class="modal-content">
    <h3>Upload Image</h3>
    <form id="uploadimg" enctype="multipart/form-data">
        <input type="hidden" name="entity" value="order">
        <input type="hidden" name="orderId" value="<?php echo $orderId; ?>">
        <input type="hidden" name="status" value="<?php echo $json->response->body->order->status; ?>" />
        <input type="hidden" name="url" value="order-details.php?order=<?php echo $orderId; ?>&e=0">
        <div class="form-inputs p-l-r-0">
            <div class="row">
                <div class="col s12">
                    <div class="file-field input-field" style="display:none">
                        <div class="btn accent-color">
                            <span>File</span>
                            <input type="file" id="fileToUpload" name="fileToUpload[]" multiple="multiple">
                        </div>
                        <div class="file-path-wrapper">
                            <input class="file-path validate" type="text" placeholder="Upload one or more images">
                        </div>
                    </div>
                </div>
            </div>
            <div id="dvPreview" class="row"></div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button class="btn-flat modal-action modal-close" id="uploadimg-submit">Submit</button>
    <button class="btn-flat modal-action modal-close">Close</button>
</div>

现在，当点击＃uploadimg-submit时，执行jquery代码：

$('#uploadimg-submit').on('click', function(e) {
                   e.preventDefault();
                   $("form#uploadimg").submit();
               });

和表单提交功能：

    $("form#uploadimg").submit(function(e2) {
                   var smoothState = $('#main').smoothState().data('smoothState');
                   e2.preventDefault();
                   var formData = new FormData($(this)[0]);
                   // console.log(formData);
                   $.ajax({
                       url: 'processors/process-upload.php',
                       type: 'POST',
                       data: formData,
                       processData: false,
                       contentType: false,
                       beforeSend: function() {
                           ajaxindicatorstart();
                       },
                       success: function(rsp) {
                           if (rsp == '200') {
                               Materialize.toast('Image Uploaded Successfully', 2000, 'green');
                               smoothState.clear('/order-details.php');
                               smoothState.load('/order-details.php?order=' + $('#order_id').val());
                           } else {
                               Materialize.toast('Image Uploaded Failed', 2000, 'red');
                               smoothState.clear('/order-details.php');
                               smoothState.load('/order-details.php?order=' + $('#order_id').val());
                           }
                       },
                       error: function() {
                           Materialize.toast('Image Uploaded Failed', 2000, 'red');
                           smoothState.clear('/order-details.php');
                           smoothState.load('/order-details.php?order=' + $('#order_id').val());
                       }
                   });
                   return false;
    });

文件process-upload.php只需不到一秒的时间来处理我使用microtime调试的图像（true）。但是发送请求和接收响应的总时间接近11秒，其中大部分（约9秒）用于发送请求。以下是chrome dev工具的时间线分析。

我想减少这段时间，等待上传图像这么长时间是不可行的。有什么方法可以进一步优化它吗？

使用ajax上传图片以提交表单花费大量时间

0 个答案: