如何發佈通過JavaScript

它還使用AJAX來提供預覽，因爲他們填寫表格

但是形式使用的onsubmit = HTML表單的圖像數據「」

我遇到的問題是其中一個html輸入是圖像。

形式是下面給你一個想法：

<form method="post" action="scripts/test.php" enctype="multipart/form-data"> 
<input type="hidden" name="size" id="size" value="small" /> 
<input type="hidden" name="type" id="type" value="1" /> 
<input type="hidden" name="pos" id="pos" value="front" /> 
<input type="hidden" name="number" id="number" value="none" /> 
<input type="hidden" name="name" id="name" value="none" /> 
<label>Choose Your First Shirt Colour</label><br /> <input class="color" value="ff3300" id="colour1" name="colour1" onchange="change()"> 
<br /><br /> 
<label>Choose Your Second Shirt Colour</label><br /> 
<input class="color" value="FFFFFF" id="colour2" name="colour2" onchange="change()"> 
<br /><br /><label>Add Your Logo: <br /> 
<span style="font-size:11px;color:#FF0000;">(if you are having trouble adding your logo please contact us on 0845 6018370)</span></label> 
<br /> 
<input type="file" name="logo" id="logo" onchange="change()"/><br /><br /> 
<label>Add Your Text:</label><br /> 
<textarea name="text" cols="30" id="text" rows="5" onchange="change()"></textarea><br /> 
<label><span style="color:#000000;">Quantity: </span></label> 
<input type="text" id="quantity" name="quantity" value="1" style="width:40px;height:20px;"/><br /><br /> 
<input type="button" name="preview" value="Preview" onclick="MyPreview()"/><br /> 
<input type="submit" name="submit" value="Submit" /> 
</form>

我使用

變種標識=的document.getElementById（「標識」）值;

對於圖像，但是當我通過向PHP發送標識值時，它破壞了圖像，因爲它不是正確的發佈值，需要通過PHP腳本發送，就像您提交表單一樣。

有誰知道如何通過使用onchange和javascript獲得相同的徽標html字段的值？

來源

2013-04-17 Liam Sorsby

Nettuts寫了一篇關於此的偉大文章。這應該會對你有幫助： http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/ –

可能的重複[如何用jQuery異步上傳文件？]（http：// stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery）（可悲的是，我沒有找到一個好的問題，沒有jQuery這樣做，但[MDN有關於這個問題的好文章]（https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3A_Uploading_a_user-selected_file）。 – Quentin

您應該指定您正在尋找一種與IE 6和IE 7兼容的解決方案，或者相反，您不能使用新的HTML5功能 –

如果我正確地理解了它，你只是想在文件輸入的值被改變時顯示圖像的預覽，對嗎？

如果是這樣，我想你想要做的只是從用戶的本地驅動器加載圖像的預覽，沒有真正上傳到您的服務器。當用戶已經提交表單時，可以完成實際的文件上傳。

要執行上述過程（加載圖像文件的預覽），HTML5的FileReader API。

使用FileReader API其實很簡單，它可以做到像這樣：

的Javascript

var logo = document.getElementById("logo").files[0]; // will return a File object containing information about the selected file 
// File validations here (you may want to make sure that the file is an image) 

var reader = new FileReader(); 
reader.onload = function(data) { 
    // what you want to do once the File has been loaded 
    // you can use data.target.result here as an src for an img tag in order to display the uplaoded image 
    someImageElement.src = data.target.result; // assume you have an image element somewhere, or you may add it dynamically 
} 
reader.readAsDataURL(logo);

你可以把這個代碼的onchange事件處理中，我想你不會這裏需要AJAX。

然後當表單被提交時，圖像數據可以在其通常的位置$_FILES陣列中獲得。

來源

2013-04-17 08:45:15

不幸的是，由於交叉兼容性，我無法使用HTML5選項，因爲它不是' t支持即6/7。好呼喊雖然 –

你爲什麼還在開發6和7？立即放下它們，並且給你帶來很多麻煩。 –

@LiamSorsby嗯，是的，這真的是一個問題，但有幾個polyfills可能掩蓋了這一點，就像https://github.com/Jahdrien/FileReader和其他許多。只是說，雖然;） –

我認爲你必須把文件上傳到服務器進行預覽太多，如果你不能使用HTML5的特性

（F）打開你的$_FILES['userfile']['tmp_name']並把它生回內容，請參閱：How can I use $.ajax to set image src to dynamic image/png data?。您可以在發送數據之前調整圖像大小，然後再刪除圖像。

來源

2013-04-17 14:33:05

如何發佈通過JavaScript

回答

相關問題