Question

我是对此的新手。我要做的就是上传图像并将其发送到服务器以插入数据库。作为一个开始，我只能回显我将发送的文件名。但我继续没有这样做。得到一些嘈杂或不受欢迎的输出，没有任何意义。不能弄清楚这段代码中的错误。如果有人帮我解决这个问题会很棒。谢谢！

html和ajax：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>file upload</title>
        <!-- Make sure the path to CKEditor is correct. -->

        <style>
            #mydiv{
                position: relative;
                overflow: hidden;
                width:80px;
                height:30px;
                background:crimson;
                color:white;
                text-align:center;
                padding:auto;
                border-radius:4px ;
                border:1px solid black;
                font-size:22px;
            }
            #files{
                   position: absolute;
                   top: 0;
                   right: 0;
                   margin: 0;
                   padding: 0;
                   font-size: 20px;
                   cursor: pointer;
                   opacity: 0;
                   filter: alpha(opacity=0);
            }
        </style>
    </head>
    <body>
    <form action='file.php'  id='myform' method='POST' enctype='multipart/form-data' style='width:80px;height:70px;border:2px solid skyblue;'>
      <div id='mydiv'>upload
        <input type="file" id="files" name="files" multiple />

      </div>
      <span id='txtHint'></span>
    </form>
<output id="list"></output>

<script>

  function handleFileSelect(evt) {
    var files = evt.target.files; 
    var formData = new FormData();

    for (var i = 0, f; f = files[i]; i++) {


      if (!f.type.match('image.*')) {
        continue;
      }
      formData.append('image_name',f,f.name);

              var name =f.name;
              console.log(name);
        if (name='') {
            document.getElementById("txtHint").innerHTML ='fill the name field';
            return;
        } else {
        if (window.XMLHttpRequest) {

            xmlhttp = new XMLHttpRequest();
        } else {

            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }


        xmlhttp.open("POST", "file2.php", true)
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        xmlhttp.send(formData);

        }

      }

    }

 document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
    </body>
</html>

php文件：

echo $_FILES['image_name'];

Answer 1

要检索上传文件名，请执行以下操作：

echo $_FILES['image_name']['name']

编辑：根据你的html输入名称

echo $_FILES['files']['name']

Answer 2

如何使用BlueImp？我认为BlueImp是最好的，您可以轻松地将其包含在您的项目中

https://github.com/blueimp/jQuery-File-Upload

通过ajax

2 个答案: