当前位置: 代码迷 >> 综合 >> javascript模拟简单的文件上传域
  详细解决方案

javascript模拟简单的文件上传域

热度:33   发布时间:2024-01-21 13:58:31.0
/*** @author wsf (javascript模拟文件上传域)*/
function createFileIpt(container, name) {var filhtml = [];filhtml.push("<div class='file-box'>");filhtml.push("<input type='text' name='textfield' id='textfield' class='txt' />");filhtml.push("<input type='button' class='btn' value='浏览...' />");filhtml.push("<input type='file' name='"+ name+ "' class='file' id='"+ name+ "' size='28' οnchange=\"document.getElementById('textfield').value=this.value\"/>");filhtml.push("</div>");container.append(filhtml.join(""));appendCss();
}
/*** 添加样式* @returns*/
function appendCss() {$(".file-box").css({"position" : "relative","width" : "100%","cursor":"pointer"});$(".txt").css({"height" : "22px","border" : "1px solid #cdcdcd","width" : "180px","cursor":"pointer"});$(".btn").css({"background-color" : "#FFF","border" : "1px solid #CDCDCD","height" : "24px","width" : "70px","cursor":"pointer"});var _pos = $(".txt").position();$(".file").css({"position" : "absolute","top" : "0","left" : _pos.left + "px","height" : "24px","filter" : "alpha(opacity:0)","opacity" : "0","width" : "250px","cursor":"pointer"});
}
/*** 创建*/
createFileIpt($("#filecontainer"), "logo");
/*** ajax上传文件* @returns {Boolean}*/
function ajaxFileUpload() {$.ajaxFileUpload({url : 'some.do',//用于文件上传的服务器端请求地址secureuri : false,//一般设置为falsefileElementId : 'logo',//文件上传空间的id属性  <input type="file" id="file" name="file" />dataType : 'json',//返回值类型 一般设置为jsonsuccess : function(data, status)//服务器成功响应处理函数{alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量if (typeof (data.error) != 'undefined') {if (data.error != '') {alert(data.error);} else {alert(data.message);}}},error : function(data, status, e)//服务器响应失败处理函数{alert(e);}})return false;
}

 直接在页面引入js 并且在页面定义一个放上传域的dom就行了

  相关解决方案