點擊選擇圖片並返回上傳

html

 <div class="uploadframe">
            <h4>請上傳身份證</h4>
            <div class="item">
                <img src="images/plus.png" onclick="clickImg(this);" class="addImg">
                <input name="url" type="file" class="upload_input" onchange="change(this)"/>
                 <div class="preBlock">
                    <img class="preview" id="preview" alt="" name="pic" src=""/>
                </div>
                <img class="delete" onclick="deleteImg(this)" src="images/delete.png"/>
                <p>正面</p>
            </div>
            <div class="item">
                <img src="images/plus.png" onclick="clickImg(this);" class="addImg">
                <input name="url" type="file" class="upload_input" onchange="change(this)"/>
                 <div class="preBlock">
                    <img class="preview" id="previewanti" alt="" name="pic" />
                </div>
                <img class="delete" onclick="deleteImg(this)" src="images/delete.png"/>
                <p>反面</p>
            </div>
        </div>

　　　　 <div class="uploadtel">
            <label>聯繫電話：</label>
            <input type="number" placeholder="請輸入聯繫電話" id="numberId"/>
        </div>
        
        <button type="button" class="uploadbtn" onclick="uploadimg()">當即上傳</button> 

css

.delete { width: 18px; position: absolute; right: 8px; top: -6px; cursor: pointer; display: none; } .preview,.preBlock{ position: absolute; display: block; width: 100%; left: 0; top: 0; } .preBlock img { display: block; width:90%; height: 120px; } .upload_input{ display: block; width: 0; height: 0; -webkit-opacity: 0.0; /* Netscape and Older than Firefox 0.9 */ -moz-opacity: 0.0; /* Safari 1.x (pre WebKit!) 老式khtml內核的Safari瀏覽器*/ -khtml-opacity: 0.0; /* IE9 + etc...modern browsers */ opacity: .0; /* IE 4-9 */ filter:alpha(opacity=0); /*This works in IE 8 & 9 too*/ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*IE4-IE9*/ filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); } .item { width: 49%; display: inline-block; position: relative; } .addImg { width: 90%; position: absolute; left: 0; top: 0; z-index: 2; cursor: pointer; height: 120px; } .item p{ position: absolute; bottom: -160px; } input{ margin-bottom: 0!important; }

js(實現選擇圖片並返回圖片)

 var clickImg = function(obj){ $(obj).parent().find('.upload_input').click(); } //刪除 var deleteImg = function(obj){ $(obj).parent().find('input').val(''); $(obj).parent().find('img.preview').attr("src",""); //IE9如下 $(obj).parent().find('img.preview').css("filter",""); $(obj).hide(); $(obj).parent().find('.addImg').show(); } //選擇圖片 function change(file) { //預覽 var pic = $(file).parent().find(".preview"); //添加按鈕 var addImg = $(file).parent().find(".addImg"); //刪除按鈕 var deleteImg = $(file).parent().find(".delete"); var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase(); // gif在IE瀏覽器暫時沒法顯示 if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){ if (ext != '') { alert("圖片的格式必須爲png或者jpg或者jpeg格式！"); } return; } //判斷IE版本 var isIE = navigator.userAgent.match(/MSIE/)!= null, isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null; isIE10 = navigator.userAgent.match(/MSIE 10.0/)!= null; if(isIE && !isIE10) { file.select(); var reallocalpath = document.selection.createRange().text; // IE6瀏覽器設置img的src爲本地路徑能夠直接顯示圖片 if (isIE6) { pic.attr("src",reallocalpath); }else{ // 非IE6版本的IE因爲安全問題直接設置img的src沒法顯示本地圖片，可是能夠經過濾鏡來實現 pic.css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + reallocalpath + "\")"); // 設置img的src爲base64編碼的透明圖片 取消顯示瀏覽器默認圖片 pic.attr('src','data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); } addImg.hide(); deleteImg.show(); }else { html5Reader(file,pic,addImg,deleteImg); } } //H5渲染 function html5Reader(file,pic,addImg,deleteImg){ var file = file.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ pic.attr("src",this.result); } addImg.hide(); deleteImg.show(); }