检查文件上传字段是否为空后，如何替换提交按钮？

我有一个文件上传表单：检查文件上传字段是否为空后，如何替换提交按钮？

<form method="post" enctype="multipart/form-data"> 
    <input type="file" name="image_1" /> 
    <input type="submit" name="upload_photo" id="upload_photo" /> 
</form>

我有一个PHP脚本，上传文件，但我注意到，每当我上传一个更大的文件，它可能需要长达10秒的表单提交和要重新加载的页面。用户点击提交后，我想用提交按钮替换消息。我已经写了一些jQuery的，使这项工作：

$("#upload_photo").click(function() {      
    $("#upload_photo").replaceWith('<p>Image is uploading. Please wait...</p>');      
});

这取代了提交按钮就好了，但问题是，它也将取代提交按钮，即使文件上传字段为空。因此，在用户单击提交按钮后，我需要检查字段上传字段是否有值，以及是否用消息替换按钮。我试过这里：

if($_FILES['image_1']['tmp_name'] != '') { 
    $image_uploaded = true; 
} 

if($image_uploaded == true) { //If a file has been uploaded 
    echo '<script type="text/javascript"> 
     $("#upload_photo").replaceWith("<p>The image is uploading. Please wait...</p>"); 
     </script> 
    '; 
}

不幸的是，这并不工作，文件上传没有替换提交按钮。我尝试用警报替换.replaceWith行，但表单将上传图像，重新加载页面，然后显示警报，这太迟了。

如何在检查文件上传字段是否为空之后替换提交按钮？

来源

2012-07-02 zeckdude

必须检查与JS客户端，服务器端是晚了。 – 2012-07-02 02:49:06

http://stackoverflow.com/questions/610995/jquery-cant-append-script-element –

只是检查，看看是否有在文件输入字段的值

来源

2012-07-02 02:48:38 Musa

我经常这样处理这个问题：

1）禁用提交按钮

$(this).attr('disabled', 'disabled')

和2）更改提交按钮上的文本。

$(this).attr('value', 'Please wait ...')

这是一个jsfiddle这个。

http://jsfiddle.net/Vqyc6/8/

来源

2012-07-02 03:04:12

检查文件上传字段是否为空后，如何替换提交按钮？

回答

相关问题