Question

目前我正在使用纯jquery进行文件上传，没有任何插件。我只需要上传Jpeg，我需要在同一容器中查看，我需要在加载图像后删除图像。最初我的删除是隐藏的，因为我没有上传任何图像。

这是我目前的代码

    <div class="choose_file" id="imageUploadForm">
    <span  >Photo</span>
    <input name="Select File" class="upload" type="file" />        
    </div>
 <button id="btn_del" class="btn_del">Delete</button>

这是我的Jquery代码

    $(function () {
    $("#btn_del").hide();
    $(".upload").on("change", function()
     {
    var name = file.name;
    var size = file.size;
    var type = file.type;
    var files = !!this.files ? this.files : [];

    if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

    if (/^image/.test( files[0].type)){ // only image file
        var reader = new FileReader(); // instance of the FileReader
        reader.readAsDataURL(files[0]); // read the local file

        $("#btn_del").show();

         $("#btn_del").on("click", function()
         {
            $("#imageUploadForm").css("background-image", "none");
             $("#btn_del").css("display", "none");
         });

        reader.onload = function(){ // set image data as background of div
            $("#imageUploadForm").css("background-image", "url("+this.result+")");
        }
    }
});

}）;

实际上我无法在contianer中看到图像，但我没有得到删除按钮。实际上我已经为类型设置了变量但是我已经混淆了我需要给文件类型以及如何检查的地方。

请指导我

这是小提琴Link

请帮助我

Answer 1

将更改事件绑定到文件输入

$(".upload").on("change", function()...

http://jsfiddle.net/w7oma05h/1/

使用纯jQuery自定义文件加载器

1 个答案: