使用jquery上传图像并显示结果

时间:2011-08-15 14:28:25

标签: php jquery file-upload

我知道这是一个典型的问题,但我已经尝试了很多东西,但尚未开始工作。我有一个表单,我想上传一个图像,因为我已经了解jquery本地doesent支持imageupload形式提交。所以我们从html开始:

<form action="uploadImage.php" method="post" enctype="multipart/form-data" id="image_form" name="image_form">                                                                                                           

<input type="file" name="addImage"  />                                                      

<input type="submit" name="submit" value="submit" />    

                                    </form> 
<div id="results">
</div>

然后我们有了javascript:

$(document).ready(function() {

                                        $('#image_form').submit(function() { // catch the form's submit event
                                            $.ajax({ // create an AJAX call...
                                                data: $(this).serialize(), // get the form data
                                                type: $(this).attr('method'), // GET or POST
                                                url: $(this).attr('action'), // the file to call
                                                success: function(response) { // on success..
                                                    $('#results').load('Images.php'); // update the DIV
                                                }
                                            });
                                            return false; // cancel original event to prevent form submitting
                                        });
                                        });

有些东西告诉我需要http://malsup.com/jquery/的实现,但我真的不明白怎么做。我的用于图像上传的php脚本工作正常并且非常好,所以如果我可以使用表单操作但是使用jquery提交它会很酷。

祝你好运

2 个答案:

答案 0 :(得分:2)

您无法序列化文件输入。要异步上传某些内容并使其在所有浏览器中都能正常工作,您需要使用隐藏的iframe技巧。我建议为此找一个jQuery插件。 Here is one you can try.

答案 1 :(得分:2)

我建议你使用像uploadify这样的插件。