将多个数据（例如图像文件thourh ajax）发布到php

Question

我通过ajax将以下html输入类型发送到我的php脚本时遇到了一些麻烦。 我猜想我必须在tje js代码悬停器中定义文件，当我有更多变量从同一文件中获取信息时（se php代码），该怎么做？

<input id="imagefile" class="file" type="file" name="image" />

通过此代码

$("#addmedia").click(function(ev) {
            ev.preventDefault();
            var p                   = $("#p").val();
            var mediatype           = $("#mediatype option:selected").val();
            var addmediatype        = $("#mediatype option:selected").val();
            var title               = $("#title").val();
            var video               = $("#medialink").val();
            var imagefile           = $("#imagefile").val();

            $.post("lib/action.php", {
                mediatype:      mediatype,
                addmediatype:   addmediatype,
                title:          title,
                video:          video,
                addmedia:       true
            }, function(data) {
                $("#notify").hide().html("<h1>!</h1><h2>" + data + "</h2>").slideDown(500);
                setTimeout(function() { $("#notify").slideUp(500) }, 2500);
            });
        });

以便与我的php上传脚本一起使用。

在我的PHP代码中，我使用以下变量从文件中获取信息

if( $_POST['p'] == 1 ) {
            $name =     $_FILES['image']['name'];
            $temp =     $_FILES['image']['tmp_name'];
            $type =     $_FILES['image']['type'];
            $size =     $_FILES['image']['size'];

(...)
}

Answer 1

当将$().val用于文件字段时，由于安全性限制，您只会得到文件名。

一种解决方案（针对IE 10 +，Chrome，FF）（使用IE 10+）是使用https://developer.mozilla.org/en-US/docs/Web/API/FileReader读取文件内容，base64对其进行编码并上传。 请参阅使用Javascript读取客户端文本文件

document.getElementById('file').addEventListener('change', readFile, false);

function readFile (evt) {
   var files = evt.target.files;
   var file = files[0];           
   var reader = new FileReader();
   reader.onload = function() {
      console.log(this.result);            
   }
   reader.readAsText(file)
}

请注意，通过AJAX上载文件时，陷阱太多，不能像StackOverflow答案那样提供简洁的答案。

最简单的解决方法是不使用AJAX发送，使用常规表单上传，而是定位到隐藏的iframe，这样您的页面就不会重新加载。

看到：

• 通过HTTP在JavaScript中发送二进制数据
• PHP / JavaScript的多重上传
• http://www.html5rocks.com/en/tutorials/file/xhr2/
• http://blueimp.github.io/jQuery-File-Upload/