{"action":"opened","issue":{"url":"https://api.github.com/repos/confidence68/blog/issues/68","labels_url":"https://api.github.com/repos/confidence68/blog/issues/68/labels{/name}","comments_url":"https://api.github.com/repos/confidence68/blog/issues/68/comments","events_url":"https://api.github.com/repos/confidence68/blog/issues/68/events","html_url":"https://github.com/confidence68/blog/issues/68","id":92810959,"number":68,"title":"input file 文件上传,js控制上传文件的大小和格式","user":{"login":"confidence68","id":3736355,"avatar_url":"https://avatars.githubusercontent.com/u/3736355?v=3","gravatar_id":"","url":"https://api.github.com/users/confidence68","html_url":"https://github.com/confidence68","followers_url":"https://api.github.com/users/confidence68/followers","following_url":"https://api.github.com/users/confidence68/following{/other_user}","gists_url":"https://api.github.com/users/confidence68/gists{/gist_id}","starred_url":"https://api.github.com/users/confidence68/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/confidence68/subscriptions","organizations_url":"https://api.github.com/users/confidence68/orgs","repos_url":"https://api.github.com/users/confidence68/repos","events_url":"https://api.github.com/users/confidence68/events{/privacy}","received_events_url":"https://api.github.com/users/confidence68/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-07-03T07:19:20Z","updated_at":"2015-07-03T07:19:20Z","closed_at":null,"body":"文件上传一般是用jquery的uploadify，比较好用。后面会出文章介绍uploadify这个插件。\r\n\r\n但是，有时候为了偷懒，直接就用input 的file进行文件和图片等的上传，input file 可以控制上传的格式，但是是html5，很多浏览器不支持，请看我的文章对[input file上传类型的控制][1]。\r\n\r\n下面我用javascript来控制文件上传的大小和类型。\r\n\r\n贴出html代码：\r\n\r\n    <form  action=\"后端接口\" enctype=\"multipart/form-data\" method=\"post\" id=\"attachment_uploads\">\r\n      <div class=\"attachs fl\">\r\n           <div class=\"t_fjfont\">附件:</div>\r\n           <div class=\"upload_btns\"><input type=\"file\" name=\"file\"  id=\"file\" onchange=\"fileChange(this);\" /> </div>\r\n      </div>\r\n      <div class=\"attachs fl\">\r\n           <div class=\"t_fjfont\" style=\"color:red;font-size:12px;font-weight:bold\">文件上限2MB</d\r\n      </div>\r\n      <div class=\"attachs fl\">\r\n           <div class=\"upload_btns\"><input type=\"file\" name=\"files\"  id=\"file_fujian\" onchange=\"filefujianChange(this);\" /> <input type=\"hidden\" name=\"rev\" class=\"hide_rev\" /></div>\r\n      </div>\r\n      </form>\r\n\r\n<!--more-->\r\n\r\n\r\njavascript代码：\r\n\r\n    function fileChange(target) {\r\n         var fileSize = 0;         \r\n         if (isIE && !target.files) {     \r\n           var filePath = target.value;     \r\n           var fileSystem = new ActiveXObject(\"Scripting.FileSystemObject\");        \r\n           var file = fileSystem.GetFile (filePath);     \r\n           fileSize = file.Size;    \r\n         } else {    \r\n          fileSize = target.files[0].size;     \r\n          }   \r\n          var size = fileSize / 1024;    \r\n          if(size>2000){  \r\n           alert(\"附件不能大于2M\");\r\n           target.value=\"\";\r\n           return\r\n          }\r\n          var name=target.value;\r\n          var fileName = name.substring(name.lastIndexOf(\".\")+1).toLowerCase();\r\n          if(fileName !=\"xls\" && fileName !=\"xlsx\"){\r\n              alert(\"请选择execl格式文件上传！\");\r\n              target.value=\"\";\r\n              return\r\n          }\r\n        } \r\n        \r\n       function filefujianChange(target) {\r\n           var fileSize = 0;         \r\n           if (isIE && !target.files) {     \r\n             var filePath = target.value;     \r\n             var fileSystem = new ActiveXObject(\"Scripting.FileSystemObject\");        \r\n             var file = fileSystem.GetFile (filePath);     \r\n             fileSize = file.Size;    \r\n           } else {    \r\n            fileSize = target.files[0].size;     \r\n            }   \r\n            var size = fileSize / 1024;    \r\n            if(size>2000){  \r\n             alert(\"附件不能大于2M\");\r\n             target.value=\"\";\r\n             return\r\n            }\r\n            var name=target.value;\r\n            var fileName = name.substring(name.lastIndexOf(\".\")+1).toLowerCase();\r\n            if(fileName !=\"jpg\" && fileName !=\"jpeg\" && fileName !=\"pdf\" && fileName !=\"png\" && fileName !=\"dwg\" && fileName !=\"gif\" ){\r\n              alert(\"请选择图片格式文件上传(jpg,png,gif,dwg,pdf,gif等)！\");\r\n                target.value=\"\";\r\n                return\r\n            }\r\n          }\r\n\r\n\r\n上面代码当时为了考虑兼容问题，没有写html5的文件上传控制，直接在js中控制了。本代码支持所有直流浏览器！兼容性还是可以的！欢迎交流！\r\n\r\n\r\n  [1]: http://www.haorooms.com/post/input_file_leixing\r\n"}}