上傳文件與jQuery

我有一個關於使用Ajax文件上傳的問題。如何使用$.ajax() 提交的文件沒有特殊的JS-插件？：上傳文件與jQuery

<form action="javascript:return false;"> 
    <input type="text" id="name" /> 
    <input type="file" id="myfile" /> 
    <input type="button" id="submitbutton" value="submit" /> 
</form>

這是一個jQuery小碼：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#submitbutton').click(function() { 
      $.ajax({ 
       type: 'POST', 
       dataType: 'json', 
       enctype: 'multipart/form-data', 
       url: 'upload.php', 
       async: false, 
       data: { 
        'name': $('#name').val(), 
        'myfile': $('#myfile').val() 
       }, 
       success: function(data) { 
        alert(data.msg); 
       } 
      }); 
     }); 
    }); 
</script>

而upload.php的文件：

<?php 
$name = isset($_POST['name']) ? $_POST['name'] : ''; 
if (isset($_FILES) && isset($_FILES["file"])) { 
    $files = $_FILES['file']; 
    $error = isset($files["error"]) ? $files["error"] : ''; 
    $fname = isset($files["name"]) ? $files["name"] : ''; 
    $type = isset($files["type"]) ? $files["type"] : ''; 
    $size = isset($files["size"]) ? $files["size"] : ''; 
    $tmp_name = isset($files["tmp_name"]) ? $files["tmp_name"] : ''; 
    return array('msg' => "Hello, $name! \nYour file data:\nErr: $error, Name: $fname, Type: $type, Size: $size, Tmp: $tmp_name"); 
} 
echo json_encode(array('msg' => 'create image')); 
?>

來源

2013-04-04 user2228586

您不能使用Ajax的文件。 – gaurav 2013-04-04 10:55:56

你不能用ajax上傳文件，你需要使用一些第三方庫，如[jquery form]（http://www.malsup.com/jquery/form/） – 2013-04-04 10:56:08

這是可能的，但不是與舊版瀏覽器看到這個答案： http://stackoverflow.com/a/2320097/1141264 – DickieBoy 2013-04-04 10:57:16

其他選項使用iframe,this is a tutorial for doing this;

來源

2013-04-04 11:04:09 egig

文件無法通過AJAX上傳。您可能需要簽出確實支持文件上傳的表格插件：http://jquery.malsup.com/form/

來源

2013-04-04 11:05:44 Dineshkumar

如果您希望獲得此工作的跨瀏覽器，則無法僅使用AJAX。（但它是對你合適，這將在所有的瀏覽器不工作，你可以看看如何上傳文件使用XMLHttpRequest和jQuery here）

對我來說，最好的辦法是使用jQuery Forms插件。

另一種選擇是執行插件手動執行的操作。

這將是類似下面：

var ifrm = $("<iframe>", {id:"tmp_upload_frame"}).onload(function() { 
    // do something when response is returned 
}).hide(); 
$("body").append(ifrm); 
$("form").prop("target", "tmp_upload_frame") 
     .prop("enctype","multipart/form-data") 
     .submit();

至於我，形式插件是因爲它有非常相似的Ajax界面的界面好多了，做了很多的髒活你（如檢索來自iframe的響應）。

來源

2013-04-04 11:06:02

上傳文件與jQuery

回答

相關問題