回答
這並不像人們想象的那樣容易,一些瀏覽器會出於安全目的自動阻止從不受信任的元素上傳文件。
我推薦使用第三方文件上傳插件,例如Plupload,或者使用漸進式增強功能僞裝自定義按鈕(隱藏文件上傳按鈕,下面有自定義圖形(當然不是最靈活的解決方案)在這裏:
http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/
Plupload事件,您可以掛接到AJAX文件上傳過程中可能發生的,和做的東西與上載信息的事件查看你可能什麼響應數據的例子這個頁面。得到:
http://www.plupload.com/example_events.php
你可以得到響應的數據是這樣的:
id=p16in5el9ne2fc1rd08120in081
name=denim.png
size=20623
loaded=20623
percent=100
status=DONE
target_name=p16in5el9ne2fc1rd08120in081.png
當然,你可以修改什麼在成功上載服務器返回,才能夠得到充分的絕對路徑上傳圖片。
你有這樣的數據後,你可以連接到它,切換圖像做這樣的事情(使用jQuery):
// Called when a file has finished uploading
FileUploaded: function(up, file, info) {
$('#id_of_the_image').attr('src', 'uploads/' + file.target_name);
}
使用Plupload非常聰明,因爲它允許您在支持許多瀏覽器的同時以非常簡單的方式支持文件上傳。 :) – 2012-01-05 14:55:57
除非您使用Flash,Silverlight或Active-X對象,否則不能使用它。瀏覽器鎖定所有文件瀏覽操作。
您似乎可以通過使<input type="file" />
不可見,但通過一個按鈕,以便當用戶單擊「按鈕」時,他們實際上是單擊input
。
UPDATE:
在回答你的第二個問題,預覽圖像,就需要將其發佈到你的服務器,然後點你img
的src
到您的服務器上的圖像路徑。
http://dondedeportes.es/uploader-previewer/在這個腳本? – jacktheripper 2012-01-05 14:42:34
是的,確切地說。如果您查看圖像預覽的「src」,您會看到它位於dondedportes.es服務器上。 – 2012-01-05 14:47:00
檢查此琴:http://jsfiddle.net/techfoobar/kM9aa/1/
預覽:像賈斯汀·薩特說,除非將其上傳到服務器並使用上傳的圖像的URL,否則無法使用計劃HTML/JS預覽所選圖像。
輝煌,謝謝。 – jacktheripper 2012-01-05 14:39:47
這在IE8中不起作用。它只顯示瀏覽按鈕的最右邊。 – 2012-01-05 14:56:44
嗯..好吧..讓我們只是說-1是不需要的.. :) – techfoobar 2012-01-05 15:11:26
- 1. ckeditor上傳圖片按鈕
- 2. 圖片按鈕上傳文件CSS
- 3. 點擊圖片顯示上傳按鈕
- 4. Facebook Messenger Bot - 上傳圖片的按鈕
- 5. 如何設置圖片上傳按鈕?
- 6. 顯示上傳的圖片而不是上傳按鈕
- 7. 如何上傳圖片時點擊一個div,而不是提交按鈕
- 8. 圖片上瀏覽和上傳文件按鈕
- 9. 跨度元素上傳圖片重疊上面的按鈕
- 10. 上傳圖片到div使用.load()
- 11. 刪除Microsoft BotFramework iFrame中的圖片上傳按鈕
- 12. 單個瀏覽按鈕上傳多張圖片(smarty)
- 13. 已啓用Radeditor圖片管理器上傳按鈕
- 14. 如何做出所需要的上傳圖片按鈕
- 15. 即使未點擊確定按鈕,圖片也會上傳
- 16. XPages Richttext上傳圖片不起作用 - 隱藏搜索按鈕
- 17. JS for mouseover圖片上傳按鈕(如Facebook)
- 18. 只選擇要上傳的圖片瀏覽按鈕
- 19. ASP.NET上傳圖片,只需點擊按鈕
- 20. 如何在html中上傳圖片後顯示按鈕?
- 21. 隱藏圖片上的按鈕點擊
- 22. XmlParseException對於按鈕上的圖片
- 23. 在按鈕上添加圖片
- 24. 把一個圖片按鈕上的HTML
- 25. c圖片框上的透明按鈕#
- 26. 圖片上的div
- 27. 圖片上傳
- 28. 上傳圖片
- 29. 上傳圖片
- 30. 圖片上傳
請看我的答案,它有代碼示例和演示如何實現合適的效果。 – 2012-01-05 14:40:43
Plupload允許您將圖片上傳到您的服務器上,然後獲取上傳的圖片位置,然後您可以顯示您想要的頁面上的哪個位置。 – 2012-01-05 14:42:10
我看不到如何使用Plupload無需重新加載預覽圖像 – jacktheripper 2012-01-05 14:45:41