問題描述

我試圖在我的主題的選項頁面中使用圖像上傳，還沒有找到一個簡單的 ajax 上傳腳本，包含許多教程或一個很好的文檔，我只是想要一個簡單的直接腳本，所以我只是編輯文件路徑和耦合其他東西，當然，這可以與頁面上的許多上傳者一起使用。

我嘗試了 plupload，但它對我來説很複雜，因為我不知道任何關於 javascript，只是一點點 jQuery 的理解。

那麼有沒有一個簡單的 ajax 上傳者有一個很好的教程？

最佳解決辦法

我已經使用本機上傳器有很好的結果。嘗試添加這個 JS 片段：

jQuery('#upload_image_button').click(function() {
  formfield = jQuery('#fwpPhoto').attr('name');
  tb_show('', 'media-upload.php?type=image&TB_iframe=true');
  return false;
});

window.send_to_editor = function(html) {
  imgurl = jQuery('img',html).attr('src');
  jQuery('#fwpPhoto').val(imgurl);
  tb_remove();
}

然後，在你的 HTML 中：

<input id="fwpPhoto" name="facultyPhoto" value="">
<input id="upload_image_button" type="button" value="Upload Image">

多個上傳者

<input id="facultyPhoto-1" name="facultyPhoto-1" value="" class="fwpPhoto">
<input id="upload_image_button-1" class="uploadButton" type="button" value="Upload Image">
<input id="facultyPhoto-2" name="facultyPhoto-2" value="" class="fwpPhoto">
<input id="upload_image_button-2" class="uploadButton" type="button" value="Upload Image">
<input id="facultyPhoto-3" name="facultyPhoto-3" value="" class="fwpPhoto">
<input id="upload_image_button-3" class="uploadButton" type="button" value="Upload Image">
<input id="facultyPhoto-4" name="facultyPhoto-4" value="" class="fwpPhoto">
<input id="upload_image_button-4" class="uploadButton" type="button" value="Upload Image">

<script type="text/javascript">
    jQuery(document).ready(function($){
        var target = '';
        $('.fwpPhoto').each(function(index) {
            var field = index + 1; //because index starts at 0

            jQuery('#upload_image_button-'+field).click(function() {
                formfield = jQuery('#facultyPhoto-'+field).attr('name');
                target = '#'+formfield;
                tb_show('', 'media-upload.php?    type=image&amp;TB_iframe=true');
                return false;
            });
        });
        window.send_to_editor = function(html) {
            imgurl = jQuery('img',html).attr('src');
            jQuery(target).val(imgurl);
            tb_remove();
        }
    });
</script>

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。