我正在嘗試允許用戶上傳圖片並將其顯示在同一頁面上。例如,Facebook允許用戶在註冊時選擇文件並上傳,而無需重新加載頁面。我如何做到這一點?如何在不刷新頁面的情況下使用ajax/jQuery和PHP上傳圖片?
回答
您可以使用Uploadify
由於@Groovetrain指出這是基於Flash的,你可能想使用的iframe,而不是要考慮的東西。但是,如果Flash是沒有問題的,這裏是代碼上載時顯示圖像:
標記
<input type="file" id="file_upload" name="file_upload" />
<a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>
<div id="preview"></div>
JS,我在過去使用
$('#file_upload').uploadify({
'uploader' : '/uploadify/uploadify.swf',
'script' : '/uploadify/uploadify.php',
'cancelImg' : '/uploadify/cancel.png',
'folder' : '/uploads',
'fileExt' : '*.jpg;*.gif;*.png',
'fileDesc' : 'Image Files'
'onComplete' : function(event, ID, fileObj, response, data) {
$('#preview').append('<img src="uploads/' + fileObj.name + "/>');
}
});
的確如此,但這確實不是AJAX,因爲它是基於閃存的。 – Groovetrain 2011-04-16 18:01:42
當然''onComplete'回調鉤子也是由無插件提供的。 – 2011-04-16 18:25:17
一個選項是Andrew Valums的Ajax Upload。
我的猜測是你需要一些沒有閃光的東西。爲了使它與JavaScript一起工作,您需要一個iframe解決方案。 (由於JavaScript的訪問限制) 這是一個很好的解決方案使用jQuery:http://valums.com/ajax-upload/ 你可以找到一些更多,如果你谷歌像「jQuery的IFRAME文件上傳」
使用$郵寄或$ AJAX功能,從獲取的圖像文件並更新包含div的圖像。
$.post('file_of_image', function(data) {
$('#image_containing_div').html(data);
});
在包含文件的圖像中,在php引用中寫入echo「」和其他必要參數。
- 1. 如何在不刷新頁面的情況下上傳圖片
- 2. 如何在不刷新頁面的情況下上傳文件?
- 3. 如何在不刷新的情況下更新頁面
- 4. 如何在保留在頁面上的情況下刷新ReferenceManyField?
- 5. 在不刷新的情況下在頁面上顯示數據
- 6. 如何在不刷新頁面的情況下發送表單
- 7. 如何在不刷新頁面的情況下更改URL?
- 8. 如何在不刷新頁面的情況下提交表單
- 9. 如何在不刷新頁面的情況下保存文件?
- 10. 如何在不離開頁面的情況下下載圖片?
- 11. 如何在不刷新頁面的情況下顯示名稱值而不是刷新頁面(使用jQuery)
- 12. 如何在不使用jQuery刷新頁面的情況下更新cookie值?
- 13. 如何在不使用節點刷新的情況下更新當前頁面?
- 14. 如何在不刷新angularjs的情況下返回上一頁?
- 15. 如何在不刷新頁面的情況下重新加載mapquest地圖?
- 16. 如何在不刷新索引的情況下刷新DIV頁面
- 17. 如何在不刷新所有頁面的情況下在asp.net中使用updatePanel?
- 18. 在不使用ajax的情況下刷新頁面中的頁面
- 19. 無頁面刷新上傳圖片
- 20. 圖片上傳無頁面刷新
- 21. Ajax圖片上傳刷新頁面?
- 22. ASP.NET上傳圖片後刷新頁面
- 23. 如何在不刷新頁面的情況下在EmberJS 1.13.8中渲染視圖?
- 24. 如何在不刷新頁面的情況下將錯誤消息添加到使用PHP的頁面?
- 25. 如何在不刷新頁面的情況下使用表單進行驗證?
- 26. Django - 如何在不刷新頁面的情況下保持同一頁面?
- 27. 如何在不刷新頁面的情況下更改頁面URL?
- 28. 如何在不干擾頁面內容的情況下刷新頁面
- 29. 如何使用CKEditor在不刷新的情況下在同一頁上發佈?
- 30. 如何在不刷新所有頁面的情況下更新下拉值
使用隱藏的iframe? – 2011-04-16 18:03:44