<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.js" ></script>
</head>
<body>
<div class="upload_img" id="contractDiv">
<div class="upload_x">X</div>
<div class="demo" style=" margin-top:20px;">
<div class="bheader"><h3>——图像上传表单——</h3></div>
<div class="bbody">
<h3>请选择图像文件</h3>
<div><input type="file" name="contractpic" id="image_file" οnchange="fileSelectHandler()" /></div>
<div class="error"></div>
<div class="step2">
<!-- <h2>请选择需要截图的部位,然后按上传</h2> -->
<h3>点击上传</h3>
<img id="preview" style="width:100px;height:100px;"/>
<input type="button" value="上传" id="contractUpload" class="upload_inp2" style="cursor:pointer;"/>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function fileSelectHandler() {
// get selected file
var oFile = $('#image_file')[0].files[0];
// hide all errors
$('.error').hide();
// check for image type (jpg and png are allowed)
var rFilter = /^(image\/jpeg|image\/png)$/i;
if (! rFilter.test(oFile.type)) {
$('.error').html('Please select a valid image file (jpg and png are allowed)').show();
return;
}
// check for file size
/* if (oFile.size > 250 * 1024) {
$('.error').html('You have selected too big file, please select a one smaller image file').show();
return;
} */
// preview element
var oImage = document.getElementById('preview');
// prepare HTML5 FileReader
var oReader = new FileReader();
oReader.onload = function(e) {
// e.target.result contains the DataURL which we can use as a source of the image
oImage.src = e.target.result;
oImage.onload = function () { // onload event handler
// display step 2
$('.step2').fadeIn(500);
// display some basic image info
var sResultFileSize = bytesToSize(oFile.size);
$('#filesize').val(sResultFileSize);
$('#filetype').val(oFile.type);
$('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight);
// Create variables (in this scope) to hold the Jcrop API and image size
var jcrop_api, boundx, boundy;
// destroy Jcrop if it is existed
if (typeof jcrop_api != 'undefined')
jcrop_api.destroy();
// initialize Jcrop 截图功能
/* $('#preview').Jcrop({
minSize: [32, 32], // min crop size
aspectRatio : 1, // keep aspect ratio 1:1
bgFade: true, // use fade effect
bgOpacity: .3, // fade opacity
onChange: updateInfo,
onSelect: updateInfo,
onRelease: clearInfo
}, function(){
// use the Jcrop API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the Jcrop API in the jcrop_api variable
jcrop_api = this;
});*/
};
};
// read selected file as DataURL
oReader.readAsDataURL(oFile);
}
</script>
</body>
</html>
上传图片时,Input file图片预览的实现
最新推荐文章于 2021-06-04 11:05:39 发布