上传图片时,Input file图片预览的实现

最新推荐文章于 2021-06-04 11:05:39 发布

置顶 Oo当前明月oO

最新推荐文章于 2021-06-04 11:05:39 发布

阅读量438

点赞数 1

分类专栏：上传图片时 Input file图片预览的实现文章标签： java js img 图片

本文链接：https://blog.csdn.net/xun573017588/article/details/76269559

版权

上传图片时同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

Input file图片预览的实现

1 篇文章 0 订阅

订阅专栏

<!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>