简单jQuery文件上传插件（仅使用iFrame）

我花了很多时间在网上搜索，找到了一个非常简单和基本的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);

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 
            }
        }       
    }
}

这是插件本身：

<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);

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 
            }
        }       
    }
}

---

你可以使用优良的上传。我在一个生产应用程序中使用它，它工作得非常好。我们甚至将其直接上传到S3

---

如果您随身携带uploadPhoto.php代码，请将其张贴在这里好吗？这将非常有帮助。谢谢我已经添加了

html

和

php

我一直在寻找相同的东西。事实证明，在iframe中使用独立的上传应用程序是最简单的方法。但是我不确定它们是否安全。你可以在iframe@shababhsidique中使用这个。你的评论没有任何意义。把问题再读一遍。OP试图利用隐藏的iFrame上传文件。没有理由使用退回到通过iframe上传的插件，在iframe内部！你完全没有抓住问题的要害。