загрузка файла на странице ajax - PullRequest
Новая
       8

загрузка файла на странице ajax

0 голосов
/ 03 декабря 2011

Я пытаюсь загрузить файл на страницу результатов ajax.

Файл main.php представляет собой базовый код Ajax, как показано ниже: 

<html>
 <head>
<script type="text/javascript">
    function loadXMLDoc() {
        var xmlhttp;
        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "file.php", true);
        xmlhttp.send();
    }
</script>    
 </head>
 <body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onClick="loadXMLDoc()">Change Content</button>

</body>
</html>

и форма загрузки файла file.php выглядит следующим образом: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1" enctype="multipart/form-data" method="post" action="fileupload.php">
  <p>
    <label for="file"></label>
    <input type="file" name="file" id="file" />
  </p>
  <p>
    <input type="submit" name="submit" id="submit" value="Submit" />
  </p>
</form>
</body>
</html>

У меня есть третий файл, который обрабатывает загрузку файла fileupload.php 

<?php
$file_fullname= $_FILES['file']['name'];
$file_ext1 = pathinfo($file_fullname, PATHINFO_EXTENSION);
$file_ext = ".".$file_ext1;
$file_name = pathinfo($file_fullname,PATHINFO_BASENAME);
$temp_name = str_replace($file_ext,'',$file_fullname);
$new_file_name = md5($temp_name . $dt);
echo $path= "upload/".$new_file_name . $file_ext;
$photo = $new_file_name . "" . $file_ext;
echo "<BR>";

   if ($_FILES["file"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
    }
  else
    {
    echo "Upload: " . $_FILES["file"]["name"] . "<br />";
    echo "Type: " . $_FILES["file"]["type"] . "<br />";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";

    if (file_exists($path))
      {
      echo $path . " already exists. ";
      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"], $path);
      echo "Stored in: " . $path;
      }
    }
?>

Страница работает нормально, когда я указываю сообщение формы на fileupload.php

Но когда я переместил содержимое файла fileupload.php в файл file.php с кодом ajax. похоже, процесс загрузки файла не запущен. Обновленный код file2.php выглядит следующим образом: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <script type="text/javascript">
    function fileup()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","file.php",true);
    xmlhttp.send();
    }
    </script>

<?php
$file_fullname= $_FILES['file']['name'];
$file_ext1 = pathinfo($file_fullname, PATHINFO_EXTENSION);
$file_ext = ".".$file_ext1;
$file_name = pathinfo($file_fullname,PATHINFO_BASENAME);
$temp_name = str_replace($file_ext,'',$file_fullname);
$new_file_name = md5($temp_name . $dt);
echo $path= "upload/".$new_file_name . $file_ext;
$photo = $new_file_name . "" . $file_ext;
echo "<BR>";

   if ($_FILES["file"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
    }
  else
    {
    echo "Upload: " . $_FILES["file"]["name"] . "<br />";
    echo "Type: " . $_FILES["file"]["type"] . "<br />";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";

    if (file_exists($path))
      {
      echo $path . " already exists. ";
      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"], $path);
      echo "Stored in: " . $path;
      }
    }
?>
</head>

<body>
<form id="form1" name="form1" enctype="multipart/form-data" method="post" action="fileupload.php">
  <p>
    <label for="file"></label>
    <input type="file" name="file" id="file" />
  </p>
  <p>
    <button type="button" onClick="fileup()">Upload</button>
  </p>
</form>
</body>
</html>

Может совет ?? Я просто пытаюсь выполнить загрузку файла в разделе результатов AJAX, поэтому нет необходимости обновлять всю страницу.

Спасибо!

Ответы [ 2 ]

2 голосов
/ 03 декабря 2011

Исторически значения <input type="file"> элементов были недоступны для JavaScript в качестве меры предосторожности.

Файловый API был определен для обеспечения некоторой поддержки взаимодействия с файлами в JavaScriptи имеет некоторую поддержку - http://caniuse.com/fileapi.

Однако, если проблема заключается в совместимости со старыми браузерами, вы не сможете использовать Ajax для загрузки файлов.

0 голосов
/ 03 декабря 2011

Я предлагаю вам использовать этот плагин. Я использую его для загрузки ajax в моих проектах.

http://jquery.malsup.com/form/#file-upload

этот плагин для загрузки использует форму и отправляет данные в несколько частей. Вы можете увидеть пример кода: 

<form id="uploadForm" action="files.php" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="MAX_FILE_SIZE" value="100000">
                File: <input type="file" name="file">
                Return Type: <select id="uploadResponseType" name="mimetype">
                    <option value="html">html</option>
                    <option value="json">json</option>
                    <option value="script">script</option>
                    <option value="xml">xml</option>
                </select>
                <input type="submit" value="Submit">
            </form>

и это код, который превращает вашу форму в ajax-загрузку: 

<code> $('#uploadForm').ajaxForm({
        beforeSubmit: function(a,f,o) {
            o.dataType = $('#uploadResponseType')[0].value;
            $('#uploadOutput').html('Submitting...');
        },
        success: function(data) {
            var $out = $('#uploadOutput');
            $out.html('Form success handler received: <strong>' + typeof data + '</strong>');
            if (typeof data == 'object' && data.nodeType)
                data = elementToString(data.documentElement, true);
            else if (typeof data == 'object')
                data = objToString(data);
            $out.append('<div><pre>'+ data +'
'); } });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...