唱山歌的小修修 2016-01-14 03:51 采纳率: 100%
浏览 2146
已采纳

【手机上传】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条回答

  • Go 旅城通票 2016-01-14 09: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>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题