將圖像文件上傳到服務器而不使用HTML表單元素

我需要在服務器上傳圖片而不使用html表單標記。有沒有一個簡單的做到這一點。實際上，我一直在構建一個應用程序，允許用戶上傳他的圖片或從網絡攝像頭拍攝新的圖片，如果用戶點擊上傳按鈕，圖片將移動到服務器。當用戶上傳圖片並按上傳按鈕，它工作正常，因爲我一直在使用類型='文件'的HTML輸入標籤，但是當我從攝像頭拍照並呈現在HTML5畫布標籤上，然後我點擊上傳按鈕，沒有圖片因爲輸入標籤中沒有文件，請移至服務器。在這兩種情況下，我都使用相同的canvas元素和img標籤來向用戶顯示它。將圖像文件上傳到服務器而不使用HTML表單元素

IS有不使用表格元件或上傳方式有可以分配的圖像對象，我從Canavas元件進入相同的形式輸入元件的方式??

所有答案都提前歡迎

非常感謝

服務器端代碼

function bytesToSize1024($bytes, $precision = 2) { 
    $unit = array('B','KB','MB'); 
    return @round($bytes/pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i]; 
} 

$sFileName = $_FILES['image_file']['name']; 
$sFileType = $_FILES['image_file']['type']; 
$sFileSize = bytesToSize1024($_FILES['image_file']['size'], 1); 

$target = "upload/"; 
$target = $target . basename($_FILES['uploaded']['name']) ; 
$ok=1; 
$error=$_FILES["image_file"]["error"]; 


$uploaddir = '/var/www/example119/upload/'; 
$uploadfile = $uploaddir . basename($_FILES['image_file']['name']); 

    if(!empty($_FILES)) 
    { 
    if(move_uploaded_file($_FILES['image_file']['tmp_name'], "$target$sFileName")) 
    { 
    echo "The file ". basename($_FILES['image_file']['name']). " has been uploaded..."; 
    } 
    else { 
    echo "Sorry, there was a problem uploading your file. {$error}"; 
    } 
    } 
    else 
    { 
    echo "_files is empty"; 
    }

javascipt的代碼，以使一個HttpRequest

function startUploading() { 
    // cleanup all temp states 

    iPreviousBytesLoaded = 0; 
    var oProgress = document.getElementById('progress'); 
    oProgress.style.display = 'block'; 
    oProgress.style.width = '0px'; 

    // get form data for POSTing 
    //var vFD = document.getElementById('upload_form').getFormData(); // for FF3 
    var vFD = new FormData(document.getElementById('upload_form')); // this is for when user upload from browser box 
    var vvFD=document.getElementById('preview1'); //added by TODO to test 
    // create XMLHttpRequest object, adding few event listeners, and POSTing our data 
    var oXHR = new XMLHttpRequest();   
    oXHR.upload.addEventListener('progress', uploadProgress, false); 
    oXHR.addEventListener('load', uploadFinish, false); 
    oXHR.addEventListener('error', uploadError, false); 
    oXHR.addEventListener('abort', uploadAbort, false); 
    oXHR.open('POST', 'example_upload/upload.php'); 
    //oXHR.send(vFD); 
    oXHR.send(vvFD); 

    // set inner timer 
    oTimer = setInterval(doInnerUpdates, 300); 
}

來源

2012-01-14 Nadeem Yasin

也許你應該試着發送圖像數據通過POST。它沒有任何大小限制，並且內容可以遵循任何格式。

來源

2012-01-14 19:52:25

只是出於興趣，你會怎樣選擇要上傳的文件？當然你需要一個文件輸入來讓用戶訪問他們的文件系統..？如果還有其他方法（不使用Flash或用戶可能沒有的其他插件），那麼我很想知道它。 – ClarkeyBoy 2012-01-14 19:57:35

如果您正在發送實際文件，您當然會使用文件輸入。但是，如果像問題所建議的那樣想要將一些任意數據上傳到服務器並將其存儲在那裏，則可以使用POST方法。沒有辦法不涉及Flash或其他插件，或者使用舊的文件輸入字段來訪問用戶的文件系統，這當然只是一種合理的安全預防措施。 – 2012-01-14 20:00:16

啊是的，好的安全預防措施 - 使它如此bloomin的相同的'難以定製的文件輸入的外觀和感覺！ – ClarkeyBoy 2012-01-14 20:03:05

不，你不能上傳沒有窗體標籤。有些似乎使用Ajax的解決方法，比如iframe或使用Flash。

來源

2012-01-14 19:54:01 Cyberon

謝謝你的答案，有沒有辦法，我改變了輸入文件標籤的src，而不是打開一個瀏覽器對話框選擇文件，例如，如果我有一些img標籤和想要保存的圖像由img標籤的服務器？ – 2012-01-14 20:10:58

如果你不想使用表單元素，然後你怎麼把從用戶輸入？你可以使用Flash，Java，但它只會讓你的工作更加困難..我可能會建議使用表單輸入，使用Javascript處理它，然後將其發送到PHP上傳器腳本。您可以將用戶重定向到該PHP頁面，做的工作有或做它用AJAX，並採取一個整數，這將代表您的新上傳的圖像，然後在數據庫中插入或任何你存儲它們，並顯示用戶自己的新形象..

來源

2012-01-14 20:04:10

是沒有辦法，我改變輸入文件標籤的src，而不是打開一個瀏覽器對話框選擇文件，例如，如果我有一些img標籤和想要保存的圖像由img標籤到服務器的方式？ – 2012-01-14 20:20:49

我從網絡攝像頭拍攝圖像並將其渲染爲HTML5 canvas元素，然後我有一個上傳按鈕，通過按此按鈕，我將HTML5畫布轉換爲圖像並且想要保存該圖像。希望你得到我的問題？ - – 2012-01-14 20:21:02

您無法更改輸入文件標籤的SRC。它違背了各種安全問題。 – 2012-01-14 20:25:33

將圖像文件上傳到服務器而不使用HTML表單元素

回答

相關問題