不要设置控件的鼠标样式,新建一个ashx的文件
分类:巴黎人-前端

美中相差

未有什么能够指责,file控件很强劲,给网页上传文件带来了庞然大物的便利。可是,它并不是全盘!

第一,从控件本人来讲,大家能够由此value属性获取到客商选用的文件名称,但由于安全性等因素思考,该属性不能够钦定私下认可值,並且该属性为只读属性。

附带,大概也是file控件令广大开荒者发烧的地方。file控件在相继主流浏览器之间的表现大有差距,给客商带来的视觉感受不千篇一律,並且差不离不容许通过直接更换样式来达成统一,下边小编用一张图来更清晰的告诉大家:

图片 1

吃透了吧?更可恶的是“采取文件”、“Browse…”、“浏览…”三处文字均相当小概改动!!不过,那仅仅是视觉上的差别,区别浏览器下file控件的表现也存在有的差别:

  • A1、A2、A3、A4、A6,五处大家均能够单击触发文件选取
  • A5 处大家却供给双击手艺接触文件选用

一句话来讲,file控件从暗中同意视觉效果和相互体验方面来说,是开垦职员和普通客户都很难接受的。

<style>
    .file-group {
        position: relative;
        width: 200px;
        height: 80px;
        border: 1px solid #ccc; /* 为了显得可知区域,非必需 */
        overflow: hidden;
        cursor: pointer;
        line-height: 80px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background-color: #f50;
        border-radius: 4px;
    }
    .file-group input {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 300px;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer;
    }
    .file-group:hover {
        background-color: #f60;
    }
</style>
<div class="file-group">
    <input type="file" name="" id="J_File">
    选取文件
</div>

upload...

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<title>upload...</title>
<style>
#ui-upload-holder{ position:relative;width:60px;height:35px;border:1px solid silver; overflow:hidden;}
#ui-upload-input{ position:absolute;top:0px;right:0px;height:100%;cursor:pointer; opacity:0;filter:alpha(opacity:0);z-index:999;}
#ui-upload-txt{ position:absolute;top:0px;left:0px;width:100%;height:100%;line-height:35px;text-align:center;}
#ui-upload-filepath{ position:relative; border:1px solid silver; width:150px; height:35px; overflow:hidden; float:left;}
#ui-upload-filepathtxt{ position:absolute; top:0px;left:0px; width:100%;height:35px; border:0px; line-height:35px; }
.uploadlay{margin:200px; border:1px green solid; width:300px; height:200px; padding:10px; }
</style>
</head>
<body>
<div class="uploadlay">
<div id="ui-upload-filepath">
<input type="text" id="ui-upload-filepathtxt" class="filepathtxt" />
</div>
<div id="ui-upload-holder" >
<div id="ui-upload-txt">上传</div>
<input type="file" id="ui-upload-input" name="myfile" />
</div>
</div>
<script>
document.getElementById("ui-upload-input").onchange=function(){
document.getElementById("ui-upload-filepathtxt").value = this.value;
}
</script>
</body>
</html>

后台代码

新建一个ashx的公文,这里创立三个uploadHandler.ashx,然后写入如下代码,用于保存。

    public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset = "utf-8";

            HttpPostedFile file = context.Request.Files["files"];
            string uploadPath =
                HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\";

            if (file != null)
            {
                if (!Directory.Exists(uploadPath))
                {
                    Directory.CreateDirectory(uploadPath);
                }
                file.SaveAs(uploadPath + file.FileName);
                //下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
                string newName = file.FileName;
                string oldName = file.FileName;
                context.Response.Write("{"newName": "" + newName + "", "oldName": "" + oldName + ""}");
            }
            else
            {
                context.Response.Write("0");
            }
        }

 

 

File杂谈——初识file控件

2015/07/23 · HTML5 · file控件

原稿出处: 百码山庄   

先是小编表明下,这里介绍的file控件指的是网页中的FileUpload对象,相当于我们周边的<input type=”file”> 。假使你不是想搜寻那地方的东西,就足以绕道了。

1、在比较旧的浏览器中(比方IE9及以下,不扶助 fileAPI,不扶助XMLHttprequest level2 不得不用表单post文件)上传图片时,只可以选拔 表单 post,处于安全上的思量,input[type="file"] 的公文采用开关样式并不能轻便修改(可是可以修改input 的折射率),大概会跟设计员的安排格不相入,那时能够利用透明效果来自定义上传按键。
2、控件宽度最棒不用超过60px,因为file控件浏览按键的上涨的幅度不能修改,在firefox下约为60px。若是超越60px,不要设置控件的鼠标准样品式,由于firefox下file控件的鼠标准样品式只在浏览按键上生效,倘使设置鼠标准样品式会招致控件左侧和侧面样式区别等。
3、控件文字展现层的行高与控件容器层的惊中国人民保险公司持一致以保障文字垂直居中。
4、由于安全性难点,文件上传控件必须运用鼠标点击浏览按键弹出文件选用窗并精选文件,能力向服务器上传文件(不援助file API ),通过js触发file控件的click() 事件来弹出文件选用窗然后选取文件的法子是力所不及上传文件的,因而必需使file控件覆盖在文字显示层下面,将file控件样式设置为透明来显示上面包车型客车文字层。
5、xmlhttprequest组件(level1 , level 2已经协理二进制数据上传和跨域)是力不胜任上传文件的,异步上传文件需求选择iframe 引进上传控件使用 表单 post 数据,能够把文件上传功效单独放在iframe内完成,也得以独自把拍卖图片上传的服务器脚本钦命在iframe内开采(设置form表单的 target 指向 iframe 窗口)。

upload...

预览效果

图片 2

聊起底的成效如上海教室所示,为了落到实处那几个大家一步一步来深入分析。

 

本文由巴黎人手机版发布于巴黎人-前端,转载请注明出处:不要设置控件的鼠标样式,新建一个ashx的文件

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文