如何在input標籤選擇圖片上傳並設置圖片大小以及點擊圖片可以選擇刪除

1、引入jquery庫<script type="text/javascript" src="__PUBLIC__/js/jquery.js"></script>，選擇正確放jquery文件的路徑

2、放一個文件選擇的<input type="file" id="file">的標籤

3、寫一個用於存放圖片的容器<div  id="image-wrap"></div>

4、引入一個<script src="__PUBLIC__/js/image-file.js"></script>

5.image-file.js內容如下：

(function($) {       
$.imageFileVisible = function(options) {     
     // 默認選項
var defaults = {    
//包裹圖片的元素
wrapSelector: null,    
//<input type=file />元素
  fileSelector:  null ,
  width : '100%',
  height: 'auto',
  errorMessage: "不是圖片"
 };    
 // Extend our default options with those provided.    
 var opts = $.extend(defaults, options);     
 $(opts.fileSelector).on("change",function(){
var file = this.files[0];
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function(){
var img = new Image();
img.src = reader.result;
$(img).width( opts.width);
$(img).height( opts.height);
$( opts.wrapSelector ).append(img);
};
reader.readAsDataURL(file);
}else{
alert(opts.errorMessage);
}
});
};     
})(jQuery);
6、在script標籤裏顯示圖片插件

<script>

    $(document).ready(function(){
        //圖片顯示插件
        $.imageFileVisible({wrapSelector: "#image-wrap",   
        fileSelector: "#file",
        width: 102,
        height: 123
        });
        });

</script>

-------------------------到此圖片可以在選擇了圖片之後顯示出來了-----------------------------------------------

7、點擊圖片可以選擇刪除圖片或者取消刪除

在<script></script>中加上

$(function(){

     $("#image-wrap").click(function(){
         if(confirm("是否要更換圖片？")){
            $("#image-wrap").empty();
            if($("#file").outerHTML){
                $("#file").outerHTML=$("#file").outerHTML;
            }else{
                file.value="";
            }
         }
     })     
     
   });
  
----------------------------------------------------------------------------到此任務完成--------------------------------------------------