2012-01-01 82 views
1

我已經放在一起PHP腳本和允許用戶上傳圖像文件的小形式。就目前而言,這是通過父HTML頁面上的按鈕的「onclick」事件作爲彈出窗口激活的。替代彈出窗口

從我在這個網站上做的研究中,我知道'彈出窗口'並不是每個人都喜歡的,所以我真的在尋求一些建議,看看是否有其他的選擇窗口。我已經嘗試了jQuery模態對話框,並且遇到了各種各樣的問題,因爲我有多個提交按鈕,所以如果可能的話,我寧願不轉換,儘管模式對話框的樣式是沿着正確的線條。

+0

描述「各種各樣的問題,因爲我有多個提交按鈕」,因爲jquery模式對話框或另一個jQuery解決方案是要走的路。 – Olaf 2012-01-01 16:35:46

+0

爲什麼彈出窗口/對話框?任何方式嘗試fancybox或燈箱。 – Sawny 2012-01-01 16:37:32

+0

嗨,非常感謝回覆我的帖子。即使在一些成員收到一些優秀的學費後,我也無法在主要表單上提交「提交」操作,即提交完整的表單以獨立於提交我正在上傳的圖像。親切的問候 – IRHM 2012-01-01 16:39:28

回答

1

就我個人而言,我是JQuery UI模式對話的粉絲,因爲它是輕量級的,我已經在我的應用中加載UI。

但還有更多的事情在這裏......問題不在於對話框,而是您嘗試在對話框中進行文件上傳的事實。上傳文件的傳統方法是通過$ _POST。這很好,除了你的表單需要一個動作,並且該動作默認會強制加載頁面,即使你將它發佈到自己。因此,在實踐中,如果您確實上傳了傳統方式,則不會有模式對話框。

你可能要找的是做文件上傳的「Ajax」方法。這不是真的ajax .....你會做的是上傳到頁面中的「隱藏」iFrame,該頁面便於上傳,看起來沒有重新加載。 Here's a tutorial ......那裏有一百萬人。

還有一些jQuery插件可以使上傳更容易...... Uploadify只是其中之一。

請注意,即使您使用「異步」方法,您仍然受到HTML的限制。有一個上傳按鈕或一個<input type="submit">將提交您的表單,雖然不正確,使表單看起來像只是失控失控。因此,要解決這個問題,請將您的上傳按鈕設置爲另一個非表單提交元素,例如<a>或者您只需通過JavaScript調用onclick的圖像。或者,使其成爲一個按鈕,並使用onclick來防止默認的HTML行爲。我通常使用jQuery UI按鈕樣式來做後者。

+0

感謝您花時間閱讀並回復我的文章。鏈接和你的指導是現貨!再次非常感謝和親切的問候。 – IRHM 2012-01-01 17:58:01

1

爲什麼不試試看lightbox? http://en.wikipedia.org/wiki/Lightbox_(JavaScript

有各種各樣的lightbox克隆可用,您可以使用帶有上傳器窗體的iframe。看看這裏的比較:http://planetozh.com/projects/lightbox-clones/

+0

嗨,非常感謝您看我的文章。我看過「燈箱」,它看起來是一個偉大的軟件。我遇到的問題是,我需要將主頁面的ID鏈接到爲該特定記錄保存的圖像。而不是試圖解釋,請找到我的網頁的鏈接。 http://www.mapmyfinds.co.uk/development/test.php。正如你可以看到用戶通過頁面工作,然後在底部,他們被問到是否要上傳任何圖像。我使用PHP將圖像保存到一個文件夾,因爲這是我認爲鏈接主要記錄和鏈接圖像的唯一方式。親切的問候 – IRHM 2012-01-01 16:45:57

+0

我認爲你已經找到了解決方案,但你可以鏈接到主頁的ID的權利?如果您使用GET參數打開iframe,則可以將主ID添加到iframe中的上載表單中。 – Tieme 2012-01-02 12:41:53

1

至於我知道這是非常簡單和較少的JavaScript彈出窗口。這可能會幫助你。 less javascript popup box

+0

嗨,非常感謝您花時間給我發送這個鏈接,這是一個很好的例子。親切的問候 – IRHM 2012-01-01 17:58:41

+0

高興地幫助你...歡迎。 – VKGS 2012-01-01 18:03:04