javascript上传组件
先上效果图:
选择文件后会自动上传,做为一个div层显示在网页中
引入js代码
1 | < script type="text/javascript" src="upload.js"></ script > |
这个upload.js的代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | /* * JS上传 by Newmin * MSN:new.min@msn.com * http://mi.8866.org:2/ */ var NewminFU = new upload(); function upload() { this .returnValue;} upload.prototype.returnValue= this .returnValue;<br>upload.prototype.init = function (action, func, title) { var x = (document.body || document.documentElement).clientWidth; var y = (document.body || document.documentElement).clientHeight; var text = title || "文件上传" ; var dialog = document.createElement( "div" ); dialog.style.cssText = "border:solid 1px #e5e5e5;width:200px;height:80px;background:white;overflow:hidden;" + "position:absolute;top:" + (y - 80) / 2 + "px;left:" + (x - 200) / 2 + "px;z-index:1;color:#969696;" ; dialog.innerHTML = "<div style='background:#f0f0f0;line-height:25px;font-weight:bold;color:black;padding-left:10px'>" + text + "</div><div><iframe name='newminfu_target' id='newminfu_target' style='display:none'></iframe>" + "<div style='height:20px;padding:10px;'><form id='newminfu_form' method='post' action='" + action + "'target='newminfu_target' enctype='application/www-form-urlencoded'><input type='file' " + "' style='display:none'/><a href='javascript:;'>选择文件</a><span/></form></div><div style='background:#f5f5f5;" + "height:15px;line-height:15px;overflow:hidden;font-size:10px;'>support at <a href='http://newmin.cnblogs.com'" + " target='_blank'>http://newmin.cnblogs.com</a></div>" ; document.body.appendChild(dialog); /* attach events */ var ifr = document.getElementById( "newminfu_target" ); var form = document.getElementById( "newminfu_form" ); /* 要提交文件的表单 */ var tip = form.getElementsByTagName( "span" )[0]; /* 显示提示文本框的容器 */ var bts = form.getElementsByTagName( "a" ); /* 获取触发事件的a */ var file = bts[0].previousSibling; /* 文件input */ bts[0].onclick = function () { file.click(); } file.onchange = function () { form.submit(); var html; var t = setInterval( function () { try { html = newminfu_target.document.body.innerHTML; /* 不跨域上传的时候 */ if (html == ' ') html = null; /* 设置了document.domain的时候 */ } catch (err) { //跨域的时候在action中写下如下代码 //<script>document.domain=' 域 '; //window.parent.NewminFU.returnValue=' 返回内容 '; //</script> html = null; /* 跨域上传 */ } if (html != ' ') { func(html); document.body.removeChild(dialog); clearInterval(t); } }, 10); } } |
由于实际工作中涉及到了跨域,所以在代码中也考虑到了跨域上传的问题,还可以通过iframe的属性打造一个上传进度条,
但这里没有
在要上传文件的页面中调用代码
1 2 3 4 5 6 7 8 9 10 11 | <script> function upload() { NewminFU.init( "uploadimg" , function (x) { //跨域的时候返回null,在上传页面中设置了window.parent.returnValue //故可以直接使用NewminFu.returnValue; /* var returnValue = x == null ? NewminFu.returnValue : x; alert("上传的地址为:" + returnValue);*/ alert(NewminFU.returnValue); }, "上传图片" ); } </script> |
1 | 然后在负责上传文件的页面中输出文件地址,这样才可以获取地址,这是在不跨域的情况下 |
1 | 如果设计到跨域则输出的代码应为如下: |
1 2 3 4 5 | <pre class = "brush:javascript" ><script type= "text/javascript> document.domain=''; //这里设置domain window.parent.NewminFU.returnValue=" 文件地址"; </script> </pre> |
原创内容请您保留出处及地址 , 主页:展益
【推荐】2025 HarmonyOS 鸿蒙创新赛正式启动,百万大奖等你挑战
【推荐】博客园的心动:当一群程序员决定开源共建一个真诚相亲平台
【推荐】开源 Linux 服务器运维管理面板 1Panel V2 版本正式发布
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步