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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
文件上传ajaxFileUpload.js使用方法 包含后台接收方法
1.   引用ajaxfileupload.js文件,该文件依托于jquery,因此需要先引入jquery库。 2.  JSP页面编写方法。其中type为file的input框为了美观优化,是不显示,但是有用处的确实该部分。 因此,需要调整好text和button类型的高度和宽度,与file类型的input对应。 3.  CSS部分。file的宽度略大于txt和uploa
jQuery的$.ajax()与php后台交互,进行文件上传并保存在指定目录
不得不说,太孤陋寡闻了,上一篇jquery的$.ajax()利用FormData数据类型与php后台交互写到JavaScript没有特定函数获取文件名,现在要打脸了,看人家怎么说的:https://www.codexworld.com/how-to/get-file-info-name-size-type-javascript/ Before sending the file to th
同时上传文件和相应的数据,实现前后台交互
同时上传文件和相应的数据,实现前后台交互,同时上传文件和相应的数据,实现前后台交互同时上传文件和相应的数据,实现前后台交互
PHP后台 iOS上传文件
写上传文件纯粹就是装逼,我们就当上传图片好了 。。。 首先感谢github友:https://github.com/silenceper/UploadFile 为啥子要写这篇文章,首先申明下本人不是闲的蛋疼,而是本人的确在工作中遇到蛋疼的问题,本地不是大牛,但是相互学习指点吧。。。   我们是要上传文件,一般都是post请求,开始之前你需要将这个文件搞到你项目中
文件上传无法获取内容可能原因
文件上传无法获取内容可能原因
上传文件后台无法获取文件的问题
form id= "uploadForm">         p >指定文件名: input type="text" name="filename" value= ""/>p >         p >上传文件: input type="file" name="file"/> p>         input type="button" value="上传" onclick="doUploa
jQuery 关于IE9上传文件无法进入后台问题的原因及解决办法
jQuery 关于IE9上传文件无法进入后台问题的原因及解决办法(ajaxfileupload.js第四弹),jqueryie9第四弹的诞生完全不在自己最初的计划之中,是有个网友看了先前关于《ajaxfileupload.js系列》的文章后提出的问题,由于自己一直是用chrome浏览器去测试demo,完全忽略IE浏览器(其实是故意的,懒得想浏览器兼容的问题,哈哈~),所以当我使用IE9去运行demo
PHP 文件上传后台处理脚本
后台服务器接收到的前端给其发送的文件后,处理流程如下: 文件上传是否有错误->判断文件类型->文件大小->保存文件到指定位置->其它处理... 具体实例 前端form表单: html> Filename: 前端将文件传送给服务器后,服务器对文件的处理代码如下: <?php if ((($_FILES["file"]["type"] == "image/gif"
ajaxfileupload文件上传带参数,json序列化到后台!
前几天使用了ajaxfileupload方法传文件带上json数据,到controller这么都是接受到"{"这个符号. 仅需对ajaxfileupload文件进行源码的更改即可,附上代码,可直接创建.js文件后直接粘贴即可使用. jQuery.extend({ createUploadIframe: function(id, uri) { //create frame
上传文件到php后台全过程
前端代码: Document click function send(){ var fd = new FormData(document.getElementById("fileinfo")); //userName不在表单中 //fd.append("userName", "xiaoxiao"); $.ajax({ url: "http://local