2013-04-12 118 views
2

我想按照本教程中的步驟創建一個簡單的jquery文件上傳:http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/並且它功能完善且非常出色。不過,我希望對用戶可以上傳圖片的內容擁有更多的控制權和更多的安全性,例如我希望能夠發送令牌。這是我原來的代碼:

$('#images').change(function (evt) { 
    $('#response').text("Uploading . . ."); 
    var amount = this.files.length; 
    var reader, file; 
    alert(formdata); 
    for (var i = 0; i < amount; i++) { 
     file = this.files[i]; 
     if (!!file.type.match(/image.*/)) { 
      if (window.FileReader) { 
       reader = new FileReader(); 
       reader.onloadend = function (e) { 
        appendUploadedPic(e.target.result, file.fileName); 
       }; 
       reader.readAsDataURL(file); 
      } 
      if (formdata) { 
       formdata.append("images[]", file); 
      } 
     } 
    } 

    if (formdata) { 
     $.ajax({ 
      url: "php/upload.php", 
      type: "POST", 
      data: formdata, 
      dataType:'json', 
      processData: false, 
      contentType: false, 
      success: function (res) { 
       $('#response').html(res['image_name']); 
      } 
     }); 
    } 
}); 

和PHP是簡單到目前爲止

foreach ($_FILES["images"]["error"] as $key => $error) { 
    if ($error == UPLOAD_ERR_OK) { 
     $name = $_FILES["images"]["name"][$key]; 
     move_uploaded_file($_FILES["images"]["tmp_name"][$key], "../members/" . $_FILES['images']['name'][$key]); 
    } 
} 

$respond = array("filename" => $_FILES["images"]["name"][0], "type" => "image"); 
echo json_encode($respond); 
現在

我想要做的就是這個

$.ajax({ 
      url: "php/upload.php", 
      type: "POST", 
      data: 'token=someToken&code=upload&data='+formdata, 
      dataType:'json', 
      processData: false, 
      contentType: false, 
      success: function (res) { 
       $('#response').html(res); 
      } 
     }); 

這可能嗎?如果是這樣,我將如何從PHP讀取它?它是一種post方法,我通常使用$ _POST ['code']和$ _POST'token'],但是如何讀取圖像formdata對象?

回答

4

如果formdataFormData創建,您將追加附加字段是這樣的:

formdata.append(name, value); 

所以,如果你想添加一個標記字段和代碼字段,它是:

if (formdata) { 
    formdata.append("images[]", file); 
    formdata.append("token", "someToken"); 
    formdata.append("code", "someCode"); 
} 

然而,您應該意識到,這種上傳方式不會被很多瀏覽器所支持,即IE6-IE9,它代表了大約一半互聯網用戶的一半,我相信。

我建議使用檢測瀏覽器支持並使用最佳可用方法的插件。我寫了這個插件正是出於這個目的:

https://github.com/LPology/Simple-Ajax-Uploader

有在頂部演示的鏈接嘗試一下。如果你決定使用它並遇到任何問題,只需ping我即可幫助你。祝你好運。

+1

而我將如何閱讀它的PHP? – lomas09

+1

它會像$ token = $ _POST ['token'],$ code = $ _POST ['code']和圖像$ _FILES ['images'] ['tmp_name']; - 順便說一句,我是爲了練習目的而做的,而且我確實有一個回退,但你的插件也很棒 – lomas09

+1

是的,這是完全正確的。 '$ _POST ['token']'和'$ _POST ['code']'。我也建議閱讀這個:http://php.net/manual/en/features.file-upload.php評論也有一些很好的信息。 – user1091949