Html

다음은 이미지 업로드 용 HTML입니다. 기본적으로 accept="image/*". 그러나 드롭 다운에서 변경할 수 있으며 모든 파일이 표시됩니다. 따라서 Javascript 부분은 선택한 파일이 실제 이미지인지 여부를 확인합니다.

 <div class="col-sm-8 img-upload-section">
     <input name="image3" type="file" accept="image/*" id="menu_images"/>
     <img id="menu_image" class="preview_img" />
     <input type="submit" value="Submit" />
 </div> 

여기 변경 이벤트에서 먼저 이미지의 크기를 확인합니다. 그리고 두 번째if 조건에서는 이미지 파일인지 여부를 확인합니다.

this.files[0].type.indexOf("image")것 -1이 이미지 파일이 아닌 경우.

document.getElementById("menu_images").onchange = function () {
    var reader = new FileReader();
    if(this.files[0].size>528385){
        alert("Image Size should not be greater than 500Kb");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();
        return false;
    }
    if(this.files[0].type.indexOf("image")==-1){
        alert("Invalid Type");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();
        return false;
    }
    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("menu_image").src = e.target.result;
        $("#menu_image").show();
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

답변

<script>

    function chng()
    {
        var typ=document.getElementById("fiile").value;
        var res = typ.match(".jp");

        if(res)
        {
            alert("sucess");
        }
        else
        {
            alert("Sorry only jpeg images are accepted");
            document.getElementById("fiile").value="; //clear the uploaded file
        }
    }

</script>

<input type="file" onchange="chng()">