一,区别一
先来看一个问题
<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”