jquery - 简单的 jQuery 文件上传插件(仅使用 iframe)

Question

我花了很多时间在网上搜索，找到一个非常简单和基本的 jQuery 插件，让我可以在不刷新页面的情况下上传文件，我不想要这些大插件及其所有花哨的技术，我希望它能够可以轻松添加到我的网站。所以我刚刚制作了自己的小 jQuery 插件来做到这一点，并且我决定与大家分享，以防其他人正在寻找一个。现在我不是创建 jQuery 插件的专家，所以如果我可以做出任何改进，请告诉我。

所以这里是:

这是您可以设置使用它的 html 表单:

<form enctype="multipart/form-data" class="fileUpload">
    <input type="file" name="uploadFile" />
</form>

插件的调用方式是这样的:

$("body").on("change", ".fileUpload", function(){   

    $(this).fileUpload({
        form: $(this), //selector of the form 
        actionURL: "uploadPhoto.php", //directory to handle upload
        success: function(html){
            //on successful upload, in this case if there is any html returned
            $("body").prepend(html);

        }, 
        error: function(){          

        }   
    }); 
});

这是插件本身:

(function($){
    $.fn.extend({

        fileUpload: function(options) {

            var defaults = {
               form: null,
               actionURL: null,
               success: function(){},
               error: function(){},
            };

            var options = $.extend(defaults, options);

            return this.each(function() {

                $('<iframe />', {
                id: 'upload_iframe',
                name: 'upload_iframe',
                style: 'width:0; height:0; border:none;'
                }).appendTo('body');    

                var form = $(options.form);
                form.attr("action", options.actionURL);
                form.attr("method", "post");
                form.attr("enctype", "multipart/form-data");
                form.attr("encoding", "multipart/form-data");
                form.attr("target", "upload_iframe");
                form.submit();


                $("#upload_iframe").load(function () {
                    html = $("#upload_iframe")[0].contentWindow.document.body.innerHTML;

                    html!='' ? options.success.call(this, html) : options.error.call(this);

                    $("iframe#upload_iframe").remove();

                }); 


            });
        }
    });
})(jQuery);

uploadPhoto.php:

foreach($_FILES as $file)
{

    foreach ($file['uploadFile'] as $name)
    {

    $fileArr = explode("." , $name);
    $ext = strtolower($fileArr[count($fileArr)-1]);
    $allowed = array("jpg", "jpeg", "png", "gif", "bmp");

        if(in_array($ext, $allowed))
        {
            $source = $file['tmp_name'][$i++];
            $path = "images/";
            $filename = uniqid();

            if (move_uploaded_file($source, $path.$filename.$ext))
            {
            //Do whatever on success of file upload 
            }
        }       
    }
}

Answer 1

您可以使用优秀的 uploader 。我在生产应用程序中使用它并且效果非常好。我们甚至将其直接上传到 S3。

http://fineuploader.com/