标签：nal amp 标签 for 方法 事件触发 dag 组织机构 block
先来看一个问题
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”
标签：nal amp 标签 for 方法 事件触发 dag 组织机构 block
原文地址：http://www.cnblogs.com/qingruihappy/p/7835437.html
