Question

我可以选择为每个表上传带有标题的图像，并且可以有任意数量的表格。

我正在使用下面的脚本，但警报（＆＃39; qwert＆＃39;）没有弹出，而是警告（＆＃39; asdf＆＃39;）popsup.Any ideas？

PHP file1：

<form  method='post' enctype='multipart/form-data' class='MyUploadForm'>
                    <input name='ImageFile' class='imageInput' id='imageInput' type='file'>
                    <input class='form-control dsa addcaption' name='addcaption' placeholder='Add caption' type='text' >
                    <input type='submit'  class='btn-custom5' value='Upload' >
                    <button class='btn btn-custom4 imageuploading' name='imageuploading' style='visibility:hidden' value='$x' ></button>//$x will specify path
                    </form>
                    <div class='output'></div>

AJAX：

$(document).ready(function() { 
    var options = { 
            target:   '.output',   // target element(s) to be updated with server response 
            beforeSubmit:  beforeSubmit,  // pre-submit callback 
            success:       afterSuccess,  // post-submit callback 
            resetForm: true        // reset the form after successful submit 
        }; 

     $('.MyUploadForm').submit(function() { 
            $(this).ajaxSubmit(options); 
            return false; 
        }); 

}); 


function beforeSubmit(){
 alert('qwert');
//code to check conditions for file type and size
}

PHP file2：

if(isset($_POST))
{
    //check if this is an ajax request
    if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])){
        die("<script> alert('asdf')</script>");
    }
}

Answer 1

$(document).ready(function() {

var request = $.ajax({
    url: $('.MyUploadForm').attr('action'),
    type: "POST",
    dataType: "html",
    target:   '.output',   // (Not sure about this) target element(s) to be updated with server response
    beforeSend:  beforeSubmit,  // pre-submit callback 
    success:       afterSuccess,  // post-submit callback 
    resetForm: true        // reset the form after successful submit 
}); 

function beforeSubmit(){
   alert('qwert');
   //code to check conditions for file type and size
}

希望，我是对的。您可以查看jQuery.ajax API了解更多信息。

编辑：

我对target不确定。也许您应该在success回调中设置目标。

Answer 2

您正在使用插件。您确定在页面中安装了this插件吗？

如果是，您不能在表单中触发提交事件，或者您的ajaxSubmit永远不会执行，请检查按钮点击...

另外，请务必提供afterSuccess功能：

$(document).ready(function() { 
    var options = { 
            target:   '.output',   // target element(s) to be updated with server response 
            beforeSubmit:  beforeSubmit,  // pre-submit callback 
            success:       afterSuccess,  // post-submit callback 
            resetForm: true        // reset the form after successful submit 
        }; 

     $('.btn-custom5').click(function() { 
            $(this).ajaxSubmit(options); 
            return false; 
        }); 
    function beforeSubmit(){
     alert('qwert');
    }
    function afterSuccess(){
     alert('asdfg');
    }
});

如果您之后仍然遇到错误，建议您阅读plugin homepage

中的文件上传示例

图像未上传到目录中

2 个答案: