input 和button的区别

一，区别一

先来看一个问题

 <input type="button"   class="btn-upload bg-org-code" name="yushow" id="yushow" value="点击上传组织机构代码证" onclick="uploadBtn();">
          <input type="file" name="upload" style="display:none;" onchange="previewImg(this);" id="upload" accept="image/*"/>

          function uploadBtn(){
     $("#upload").click();
 }

  function previewImg(imgFile){
         console.log(imgFile);//这里打印出是整个input标签
         var extension = imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);//扩展名
         extension = extension.toLowerCase();//把文件扩展名转换为小写
         if ((extension!='.jpg')&&(extension!='.gif')&&(extension!='.jpeg')&&(extension!='.png')&&(extension!='.bmp')){
             layer.msg("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
             $("#yushow").focus();//将焦点定位在文件上传的按钮上，可以直接按确定键再次触发
         }else{
             var path;//预览地址
             if(document.all){//IE
                 imgFile.select();
                     path = document.selection.createRange().text;
             }else{//火狐，谷歌
                 path = window.URL.createObjectURL(imgFile.files[0]);
             }
            $("#yushow").css("background-image","url("+path+")");
            $('#yushow').css('backgroundSize','364px 226px');
            uploadImg(imgFile);
            $("#bnt").attr("disabled", true);
             $("#bnt").css('background','#eee');
         }
     }

     function uploadImg(imgFile){
         var file = imgFile.files[0];//文件对象
         var name = file.name;//图片名
         var uploadAgainDom = document.querySelector('.upload-again')
         var maskDom = document.querySelector('.mask')
         var progressDom = document.querySelector('.progress-bar .progress')
      $("#upload-again").css('display','none');
        $("#mask").css('display','block');
             setTimeout(function() {
                 progressDom.className = 'progress end'
             }, 50)

         var url = '${rc.contextPath}/WXinUploadController.htm?method=UploadFile';
          $.ajaxFileUpload({
                    url: url,
                    secureuri:false,
                    type: 'POST',
                    fileElementId:"upload",
                    dataType: 'json',
                    success: function (data, status)  //服务器成功响应处理函数
                        {
                        var index = data.indexOf('{');
                        data= data.substring(index, data.length);
                        var obj = eval('(' + data + ')');
                              if ("000" == obj.code) {
                                  $("#fssId").val(obj.fssId);
                                  $("#originalFilename").val(obj.originalFilename);
                                  $("#imageType").val(obj.imageType);
                                    $("#mask").css('display','none');
                                    $("#bnt").attr("disabled", false);
                                    $("#bnt").css('background','#f54d4f');
                                } else {
                                  alert("保存有问题，请重试");
                                }

                        },
                        error: function (data, status, e)//服务器响应失败处理函数
                        {
                            alert(e);
                        }
                });

     }

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事件了。

二，区别二

 <form method="post" action="">
 <input type="text" name="">
 <button>123</button>
 </form>

当现在有个表单，有用户名和密码，当用户名或者密码没有通过校验的时候，页面会自动刷新页面，这个时候，用户需要重新输入用户名和密码，这个还只是两个input框，假如在一个页面上有多个输入框的时候因为一个没有通过校验，就需要所有的全部重写的话，对用户来说是一个非常不好的体验。所以解决方法和区别一是一样的。

方法一：

<input type="button" value="test">
改成input框的形式，这样就不会刷新页面了。
方法二：
<button type="button">
同样在button标签里面加一个type=“button”