2 qq 24946941 qq_24946941 于 2016.01.14 11:51 提问

【手机上传】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;
}

1个回答

showbo
showbo   Ds   Rxr 2016.01.14 17:31
已采纳

不需要你在 $.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>

showbo
showbo 回复唱山歌的小修修: 不能用$.post,传递不了。。这个只能传递字符串内容。给你的示例可以直接运行的。addTopic.php直接用$_POST["do"]获取do参数,$_POST["message"]获取message,if(is_uploaded_file($_FILES['picture']['tmp_name']))获取你的input文件。。然后进行保存什么的,和普通表单一样
接近 2 年之前 回复
qq_24946941
qq_24946941 您好,我想这样您看行不行:我的前端表单会输入一个text文本以及上传一个图片,{文本数据}和{图片的名字}还按照我原来postTopic的方式传递给我的php后台,然后现在我的php后台有一个$_FILE接收上传的图片并把名字赋值给它,问题就是我该如何把图片上传给php页面呢?感激不尽!
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!