如何添加图像上传与ajax jquery表单提交

I am submitting a form using ajax jquery. I would like to upload an image along with the other fields.

我正在使用ajax jquery提交一个表单。我想上传一个图像和其他字段。

Is it possible to make changes to my present script to accomplish it or would I need to redo everything :-

是否有可能对我目前的脚本进行修改以完成它，或者我需要重新做每件事:-

My jquery is :-

我的jquery是:-

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

<script type="text/javascript">
    $(function () {
        $(".submit").click(function () {
            var article_title = $("#article_title").val();
            var article_body = $("#article_body").val();

            var dataString = 'article_title=' + article_title + '&article_body=' + article_body;

            if (article_title == '' || article_body == '') {
                $('.success').fadeOut(200).hide();
                $('.error').fadeOut(200).show();
            } else {
                $.ajax({
                    type: "POST",
                    url: "<?php echo site_url().'/main/submit_article'?>",
                    data: dataString,
                    success: function () {
                        //$('.success').fadeIn(200).show();
                        $('#article_form')[0].reset();
                        $('.error').fadeOut(200).hide();
                    }

                });
            }

            return false;
        });
    });
</script>

My HTML form :-

我的HTML表单:-

<form name="article_form" id="article_form" class="article_form" method="POST" action="">
    <input type="text" name="article_title" id="article_title" placeholder="Title for your article" /> <!--<input type="file" name="pic" />-->
    <br>
    <textarea rows="12" name="article_body" id="article_body" placeholder="Tell your story"></textarea>
    <br>
    <input type="submit" name="submit" id="submit" value="Post" class="submit"/>
</form>

3 个解决方案

#1

Why not to make use of jQuery.form plugin.

为什么不使用jQuery呢?表单插件。

This plugin allows to handle file upload efficiently Check here.

这个插件允许处理文件上传的有效检查这里。

For clearing fields

为清除字段

$(':input','#myform').not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');

#2

Add enctype="multipart/form-data" into your form element.

在表单元素中添加enctype=“multipart/form-data”。

#3

Let me give you a time saver here, try:

让我给你一个节省时间的方法，试试:

uploadify http://www.uploadify.com/

or you could try:

或者你可以试试:

Jquery Forms malsup.com/jquery/form/

If you need progress bar, multiple uploads, drag and drop https://github.com/valums/file-uploader

如果需要进度条、多个上传、拖放https://github.com/valums/file-uploader

Use these tools and plugins and save yourself the stress. Don't reinvent the wheels unless you have a better idea.

使用这些工具和插件，为自己减压。除非你有更好的主意，否则不要重新发明*。

#1