similar to this, no matter how big the picture is, it can be compressed to a certain proportion and displayed normally when uploaded to this div. I wrote the picture width auto, myself, but exceeded div
< style >
.box{
width:400px;
height: 300px;
border:10px solid -sharpccc;
/* overflow: auto; */
}
-sharpcropedBigImg{
width:auto;
height:300px;
margin:0 auto;
display: block;
}
</style>
<body>
<form class="container" method="post" id="formBox" name="form">
<input type="file" id="chooseImage" name="file">
<!-- -->
<div class="box">
<img id="cropedBigImg" value="custom" alt="lorem ipsum dolor sit" data-address="" title=""/>
</div>
</form>
<script>
$("-sharpchooseImage").on("change",function(){
var filePath = $(this).val(),
//inputvalue
fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
src = window.URL.createObjectURL(this.files[0]);
//
//
if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
error_prompt_alert(",:png/jpg/jpeg");
return;
}
$("-sharpcropedBigImg").attr("src",src);});
</script>
</body>