问题描述

我试图在我的主题的选项页面中使用图像上传，还没有找到一个简单的 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 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。