選擇和在HTML

顯示音頻和視頻我寫一個程序，允許用戶選擇和顯示圖像，音頻和視頻我目前擁有的圖像部分的工作。我按照上W3Schools的所有的例子，我想我現在用的是Java腳本和選擇仍然有問題對我做，而不是在本例中陳述特定文件等，但是對於這個任務，我必須允許用戶從硬盤中選擇。這是我迄今爲止的重要部分。選擇和在HTML

<script> 
function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#blah') 
       .attr('src', e.target.result) 
       .width(150) 
       .height(200); 
     }; 

     reader.readAsDataURL(input.files[0]); 
    } 
} 
</script>

HTML的應用程序的工作圖像部分

<div data-role="page" id="page2"> 
    <div data-role="header"> 
     <h1>Image</h1> 
     <a href="#page" data-icon="gear" class="ui-btn-right">Back</a> 
    </div> 
    <div data-role="content"> 

     <input type='file' accept="image/*" onchange="readURL(this);" /> 
     <img id="blah" src="#" alt="your image" /> 

    </div> 
    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div> 
</div>

非工作音頻部分

<input type='file' accept="audio/*" onchange="readURL(this);" /> 

<audio controls> 
    <source id="blah" src="#" type="audio/ogg"> 
    <source id="blah" src="#" type="audio/mpeg"> 
    Your browser does not support the audio element. 
</audio>

非工作視頻部分

<input type='file' accept="video/*" onchange="readURL(this);" /> 


<video width="320" height="240" controls autoplay> 
    <source id="blah" src="#" type="video/ogg"> 
    <source id="blah" src="#" type="video/mp4"> 
    <source id="blah" src="#" type="video/webm"> 
    <source id="blah" src="#" type="video/"> 
    <object data="movie.mp4" width="320" height="240"> 
     <embed width="320" height="240" id="blah" src="#.swf"> 
    </object> 
</video>

來源

2013-04-24 makjak11

[w3school可能不是適當的源（HTTP：/ /w3fools.com），並且，我不知道如果你真的給了不同的元素相同的ID，但如果這樣做，只有最後一個元素將有針對性。您可以在開發人員工具中檢查元素的狀態。 – Passerby 2013-04-24 03:15:49

，你會崩潰的重要的HTML規則：ID是獨特的課程可重複使用。您的HTML的工作圖像部分是唯一包含1個ID #blah的部分。 參考：http://webdesign.about.com/cs/css/qt/tipcssclassvsid.htm

而且，如果這不是問題：我已經與<input type="file">嘗試爲好，它是沒有得到的文件（這將是更高版本）的穩定的方式。爲什麼？

輸入檢索的URL因瀏覽器而異。有些只會得到文件名（webkit），其他的則是父目錄，其他的可能是完整的路徑。
完整的文件系統API是大氣壓只有最新版本谷歌瀏覽器的支持，的確，截至目前，還沒有提供一個跨瀏覽器的解決方案。 參考：http://www.html5rocks.com/en/tutorials/file/filesystem/

最後一個參考，如果您想知道文件輸入的確切規格： 參考：http://www.w3.org/TR/html5/forms.html#file-upload-state-(type=file)

來源

2013-04-28 20:23:15 Tyblitz

選擇和在HTML

回答

相關問題