圖片上傳按鈕div

如何將id爲「uploadWrapper」的div從jsFiddle轉換爲可上傳圖片的按鈕 - 基本上與<input type="file">一樣。提前致謝。圖片上傳按鈕div

編輯 - DUE TO解答收到

我怎麼能顯示出與當有人上傳圖像的藍色背景的div代替圖像的預覽，請參閱本jsFiddle

來源

2012-01-05 jacktheripper

請看我的答案，它有代碼示例和演示如何實現合適的效果。 – 2012-01-05 14:40:43

Plupload允許您將圖片上傳到您的服務器上，然後獲取上傳的圖片位置，然後您可以顯示您想要的頁面上的哪個位置。 – 2012-01-05 14:42:10

我看不到如何使用Plupload無需重新加載預覽圖像 – jacktheripper 2012-01-05 14:45:41

這並不像人們想象的那樣容易，一些瀏覽器會出於安全目的自動阻止從不受信任的元素上傳文件。

我推薦使用第三方文件上傳插件，例如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); 
}

來源

2012-01-05 14:34:36

使用Plupload非常聰明，因爲它允許您在支持許多瀏覽器的同時以非常簡單的方式支持文件上傳。 :) – 2012-01-05 14:55:57

除非您使用Flash，Silverlight或Active-X對象，否則不能使用它。瀏覽器鎖定所有文件瀏覽操作。

您似乎可以通過使<input type="file" />不可見，但通過一個按鈕，以便當用戶單擊「按鈕」時，他們實際上是單擊input。

UPDATE：

在回答你的第二個問題，預覽圖像，就需要將其發佈到你的服務器，然後點你img的src到您的服務器上的圖像路徑。

來源

2012-01-05 14:32:48

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預覽所選圖像。

來源

2012-01-05 14:39:00 techfoobar

輝煌，謝謝。 – jacktheripper 2012-01-05 14:39:47

這在IE8中不起作用。它只顯示瀏覽按鈕的最右邊。 – 2012-01-05 14:56:44

嗯..好吧..讓我們只是說-1是不需要的.. :) – techfoobar 2012-01-05 15:11:26

圖片上傳按鈕div

回答

相關問題