jquery ajax文件上傳問題

如何通過ajax上傳jquery中的文件？ form.serialize（）不會獲取文件內容，我不想使用插件。jquery ajax文件上傳問題

2011-03-04 Bluemagica

http://stackoverflow.com/questions/4545081/how-do-to-file-upload-using-jquery-serialization – benhowdle89 2011-03-04 11:47:14

我不認爲你可以從form.serialize做（）

來源

2011-03-04 12:16:04

你能做的最好的事情是用另一種形式（下面的主要形式）進行文件上傳女巫發送上傳的文件路徑主要形式 - 當它成功時。

看代碼在here和我做這個變化像您這樣的工作：

在頭

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/jquery.form.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
$('#photoimg').live('change', function() {      
         $("#preview").html(''); 
         $("#preview").html('<br/>Colocando archivo...<br /><img src="img/loader.gif" alt="Uploading...."/>');    
     $('#imageform').bind('submit', function(e) { 
      e.preventDefault(); // <-- important 
      $(this).ajaxSubmit({ 
       target: '#preview', 
       success: function() { 
       $('#file').val($('#newimg').attr("src")); 
       }    
      }); 
     }).submit();   

     }); 
    }); 
}); 
</script>

圖片形式：

<form id="imageform" method="post" enctype="multipart/form-data" action='class/db_manager.php'> 
<label for="alias">*Imagen</label> 
<input type="file" name="photoimg" id="photoimg" /><input type="hidden" name="MM_insert_img" value="imageform" /> 
</form><p>Image</p><div id='preview'></div>

主要形式有：

<form action="<?php echo $editFormAction; ?>" method="POST" enctype="multipart/form-data" name="f_insert_cliente" id="f_insert_cliente"> 
<label for="file">Imagen</label> 
//when file uploads, this is where we will place the relative path 
<input name="file" type="text" id="file" value="" /> 
</form>

PHP文件

if ((isset($_POST["MM_insert_img"])) && ($_POST["MM_insert_img"] == "imageform")) { 

    $path = "../img/uploads/"; 

    $valid_formats = array("jpg", "png", "gif", "bmp"); 
    if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") 
     { 
      $name = $_FILES['photoimg']['name']; 
      $size = $_FILES['photoimg']['size']; 

      if(strlen($name)) 
       { 
        list($txt, $ext) = explode(".", $name); 
        if(in_array($ext,$valid_formats)) 
        { 
        if($size<(1024*1024)) 
         { 
          $actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext; 
          $tmp = $_FILES['photoimg']['tmp_name']; 
          if(move_uploaded_file($tmp, $path.$actual_image_name)) 
           {        

            echo "<br />Vista previa:<br /><img src='img/uploads/".$actual_image_name."' class='preview' id='newimg'>"; 
           } 
          else 
           echo "failed"; 
         } 
         else 
         echo "Image file size max 1 MB";      
         } 
         else 
         echo "Invalid file format.."; 
       } 

      else 
       echo "Please select image..!"; 

      exit; 
     } 
} 

?>

那麼，它是如何工作的：

用戶上傳的文件，而該事件由jQuery的功能handdled（記得在頭部添加腳本/ JS）
php返回已上傳的圖片標記代碼（或錯誤）
jQuery處理該事件並查找圖像SRC屬性並將設置爲另一個表單文本輸入的值

希望它能幫助，可以隨意問:)

來源

2012-02-18 22:53:02 kcho0

jquery ajax文件上傳問題

回答

相關問題