一，區別一

先來看一個問題

 1 <input type="button"   class="btn-upload bg-org-code" name="yushow" id="yushow" value="點擊上傳組織機構代碼證" onclick="uploadBtn();">
 2          <input type="file" name="upload" style="display:none;" onchange="previewImg(this);" id="upload" accept="image/*"/>
 3          
 4          function uploadBtn(){
 
 5     $("#upload").click();
 6 }
 7 
 8 
 9  function previewImg(imgFile){      
10         console.log(imgFile);//這裏打印出是整個input標簽
11         var extension = imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);//擴展名
12         extension = extension.toLowerCase();//把文件擴展名轉換為小寫
13         if
 
 ((extension!=‘.jpg‘)&&(extension!=‘.gif‘)&&(extension!=‘.jpeg‘)&&(extension!=‘.png‘)&&(extension!=‘.bmp‘)){
14             layer.msg("對不起，系統僅支持標準格式的照片，請您調整格式後重新上傳，謝謝 !");
15             $("#yushow").focus();//將焦點定位在文件上傳的按鈕上，可以直接按確定鍵再次觸發
16         }else{
17             var path;//
 
預覽地址
18             if(document.all){//IE
19                 imgFile.select();
20                     path = document.selection.createRange().text;
21             }else{//火狐，谷歌
22                 path = window.URL.createObjectURL(imgFile.files[0]);
23             }         
24            $("#yushow").css("background-image","url("+path+")");
25            $(‘#yushow‘).css(‘backgroundSize‘,‘364px 226px‘);
26            uploadImg(imgFile);
27            $("#bnt").attr("disabled", true);
28             $("#bnt").css(‘background‘,‘#eee‘);
29         }
30     }
31     
32     
33     function uploadImg(imgFile){
34         var file = imgFile.files[0];//文件對象
35         var name = file.name;//圖片名
36         var uploadAgainDom = document.querySelector(‘.upload-again‘)
37         var maskDom = document.querySelector(‘.mask‘)
38         var progressDom = document.querySelector(‘.progress-bar .progress‘)
39      $("#upload-again").css(‘display‘,‘none‘); 
40        $("#mask").css(‘display‘,‘block‘); 
41             setTimeout(function() {
42                 progressDom.className = ‘progress end‘
43             }, 50)
44         
45         var url = ‘${rc.contextPath}/WXinUploadController.htm?method=UploadFile‘;
46          $.ajaxFileUpload({
47                    url: url,
48                    secureuri:false,
49                    type: ‘POST‘,
50                    fileElementId:"upload",    
51                    dataType: ‘json‘,
52                    success: function (data, status)  //服務器成功響應處理函數
53                        {  
54                        var index = data.indexOf(‘{‘);
55                        data= data.substring(index, data.length);
56                        var obj = eval(‘(‘ + data + ‘)‘);
57                              if ("000" == obj.code) {
58                                  $("#fssId").val(obj.fssId);
59                                  $("#originalFilename").val(obj.originalFilename);
60                                  $("#imageType").val(obj.imageType);
61                                    $("#mask").css(‘display‘,‘none‘); 
62                                    $("#bnt").attr("disabled", false);
63                                    $("#bnt").css(‘background‘,‘#f54d4f‘);
64                                } else {
65                                  alert("保存有問題，請重試");
66                                }
67                            
68                        },
69                        error: function (data, status, e)//服務器響應失敗處理函數
70                        {
71                            alert(e);
72                        }
73                });
74         
75     }

1，現在要做的就是當觸發onclick="uploadBtn();這個事件的時候，會執行$("#upload").click();這個方法，通過它去觸發onchange事件onchange="previewImg(this);"。當時當我用button按鈕的時候並沒有觸發previewImg(this)事件，只是 uploadBtn事件觸發了。所以後來改成<input type="button" >這種方式居然觸發了onchange事件。

2，後來因為前臺寫死了，button標簽的class文件中有大量的css腳本。必須用button的按鈕，但是一直不觸發這個onchange事件，後來就在button標簽中加了一個<button type="button" ，type=“button”>效果就出來了，可以觸發onchange事件了。

二，區別二

1 <form method="post" action="">
2 <input type="text" name="">
3 <button>123</button>
4 </form>

當現在有個表單，有用戶名和密碼，當用戶名或者密碼沒有通過校驗的時候，頁面會自動刷新頁面，這個時候，用戶需要重新輸入用戶名和密碼，這個還只是兩個input框，假如在一個頁面上有多個輸入框的時候因為一個沒有通過校驗，就需要所有的全部重寫的話，對用戶來說是一個非常不好的體驗。所以解決方法和區別一是一樣的。

方法一：

<input type="button" value="test">
改成input框的形式，這樣就不會刷新頁面了。
方法二：
<button type="button">
同樣在button標簽裏面加一個type=“button”

input 和button的區別