【手机上传】jQuery传递数据同时上传文件到php后台接受不到的问题

各位前辈们好，这个问题困扰我挺长时间了，这是我之前的提问，我在网上下载的一份不完整源码：前端有一个上传框，上传图片后会自动生成预览图，可是后台php页面用post方法或者file方法都收不到上传的文件，text文本数据可以收到。有大神告诉我说用form.js插件，小弟不才怎么弄也不会，所以求大神告知详细一点的操作，在哪里添加什么才好？代码如下：
js源码

html代码

 <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <script type="text/javascript" src="mobile.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#add-topic-form").submit(postTopic);
    $("#picture").val("");
  });
  </script>
</head>
<body>
        <form method="post" id="add-topic-form" enctype="multipart/form-data">
          <div class="inner">
            <div class="input-body">
              <textarea maxlength="200" name="message" rows="7"></textarea>

              <div class="input-file">
                <div class="file-show"></div>
                <input type="button" class="camera" >
                <input type="file" name="picture" id="picture" accept="image/gif, image/jpeg, image/png" onchange="uploadPreview(this.files)">      
              </div>

            </div>
            <input class="submit-button" type="submit"  value="发布">
          </div>
        </form>        
</body>
</html>

js代码

 function uploadPreview(files)
{
    if( !window.FileReader ){}   //此处为一些条件

    $(".file-show").html("预览加载中...");

    var reader = new FileReader();

    reader.onload = function(e)
    {
        $(".file-show").html("");

        $("<img src='data:application/octet-stream;"+e.target.result.substr(e.target.result.indexOf("base64,"))+"' id='previewImg' />").appendTo($(".file-show")).click(function()
        {
            $(this).remove();

            $("#picture").val("");
        });
    }

    reader.readAsDataURL(files[0]);
}

function postTopic()            
{
    var msg = $.trim($('textarea[name=message]').val());

    var picture = "";

    picture = $("#previewImg").attr("src");

    $(".loading").show();

    $("#add-topic-form").hide();

    $.post("addTopic.php",{"do":"addTopic","msg":msg,"picture":$("#picture").val()},function(data){} //在addTopic.php页面接收不到东西
    {
        if (data.result == "login")
        {
            location.href = "./passport.php";
        }
        else if (data.result == "success")
        {
            location.href = "./?cid=" + $('input[name=cid]').val();
        }
        else if (data.result == "error")
        {
            alert(data.message);

            $(".loading").hide();

            $("#add-topic-form").show();

            $('html, body').animate({scrollTop: $(document).height()}, 300);
        }

    },"json");

    return false;
}

不需要你在 $.post("addTopic.php"自己用ajax提交啊

自己看下API：http://jquery.malsup.com/form/

DEMO，php和普通表单提交那样获取值

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
    <script src="http://malsup.github.io/jquery.form.js"></script>
    <script type="text/javascript">
        function uploadPreview(files) {
            if (!window.FileReader) { }   //此处为一些条件

            $(".file-show").html("预览加载中...");

            var reader = new FileReader();

            reader.onload = function (e) {
                $(".file-show").html("");

                $("<img src='data:application/octet-stream;" + e.target.result.substr(e.target.result.indexOf("base64,")) + "' id='previewImg' />").appendTo($(".file-show")).click(function () {
                    $(this).remove();

                    $("#picture").val("");
                });
            }

            reader.readAsDataURL(files[0]);
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {return
            $('#add-topic-form').submit(function () {
                $(this).ajaxSubmit({
                    url: 'addTopic.php',////////要提交到的页面
                    dataType: 'json',
                    data: { 'do': 'addTopic' },//表单中没有的数据放这里，json对象或者键值对
                    beforeSubmit: function (arr, $form, options) {//发送请求前的操作
                        $(".loading").show();
                        $("#add-topic-form").hide();
                    },
                    success: function (data) {
                        if (data.result == "login") {
                            location.href = "./passport.php";
                        }
                        else if (data.result == "success") {
                            location.href = "./?cid=" + $('input[name=cid]').val();
                        }
                        else if (data.result == "error") {
                            alert(data.message);

                            $('html, body').animate({ scrollTop: $(document).height() }, 300);
                        }
                    },
                    complete:function(){//请求完毕
                        $(".loading").hide();
                        $("#add-topic-form").show();},
                    error: function (xhr) {
                        alert('发生错误，服务器返回\n' + xhr.responseText)
                    }
                });
                return false
            });
            $("#picture").val("");
        });
    </script>
</head>
<body>
    <form method="post" id="add-topic-form" enctype="multipart/form-data" action="addTopic.php">
        <div class="inner">
            <div class="input-body">
                <textarea maxlength="200" name="message" rows="7"></textarea>

                <div class="input-file">
                    <div class="file-show"></div>
                    <input type="button" class="camera">
                    <input type="file" name="picture" id="picture" accept="image/gif, image/jpeg, image/png" onchange="uploadPreview(this.files)">
                </div>

            </div>
            <input class="submit-button" type="submit" value="发布">
        </div>
    </form>
</body>
</html>