Question

我使用ajax上传图片并在使用jquery上传之前显示图片。这是我的HTML代码

<form id="uploadimageS2" action="" method="post" enctype="multipart/form-data">
    <div id="image_previewS2"><img id="previewingS2" src="img/noimage.png" /></div> 
    <div id="selectImageS2">
        <label>Select Your Image</label><br/>
        <input type="file" name="fileS2" id="fileS2" required />

        <input type="submit" value="Upload" class="submit" />
    </div> 
</form>

然后这是我的jquery代码

// Function to preview image

$("#fileS2").change(function() {
    $("#messageS2").empty();         // To remove the previous error message
    var file = this.files[0];
    var imagefile = file.type;
    var match= ["image/jpeg","image/png","image/jpg"];  
    if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
    {
    $('#previewingS2').attr('src','img/noimage.png');
    $("#messageS2").html("<p id='errormsg'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
    return false;
    }
    else
    {
        var reader = new FileReader();  
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[0]);
    }       
});

function imageIsLoaded(e) { 
    $('#image_previewS2').css("display", "block");
    $('#previewingS2').attr('src', e.target.result);
    $('#previewingS2').attr('width', '250px');
    $('#previewingS2').attr('height', '230px');
};


reader.readAsDataURL(this.files[0]);
var file = this.files[0];

这里我想添加另一个元素而不是“this”。因为我在一个页面上传了3张图片，而且在使用这个脚本的时候它正在连线。我已经尝试了

 reader.readAsDataURL($(#uploadimageS2).files[0]);
 reader.readAsDataURL($(#fileS2).files[0]);

那些没有用。

具有预览的ajax图像上传

0 个答案: