精华内容
下载资源
问答
  • 1、批量上传 断点续传 web上传 页面上显示显示本地电脑文件夹信息 多种上传方式 可控制上传文件的格式和大小 2、可以直接选择文件夹上传,上传到服务器后,可以根据文件夹的目录结构重新建立文件夹结构 3、显示...
  • 本文假定读者已会web上传 针对以上描述问题,提出下面的解决方案: css样式自行设置,不提供 思路如下: 写一个普通的input元素和二个button元素(选择和导入) 写一套form上传,设置为隐藏,并为input上传框...

    众所周知,前端上传文件,需要用form表单和input的type=‘file’,等等属性设置。
    这导致了前端页面不美观,并且会随着浏览器的不同产生不同的效果。
    本文假定读者已会web上传

    针对以上描述问题,提出下面的解决方案:

    效果图
    css样式自行设置,不提供
    思路如下:

    • 写一个普通的input元素和二个button元素(选择和导入)

    • 写一套form上传,设置为隐藏,并为input上传框设置id为file

    • 为input设置readonly属性(禁止用户输入内容),设置placeholder属性(input提示信息),设置onclick点击函数checkFile函数(自定义的)在函数中触发id为file 的窗选择文件$('#file').click();,同样为选择button设置该触发函数。

    • 为form中的input设置onchange事件,当选择了文件的时候会触发该函数,这里起名为getFileName(它的作用是回显,将form中input的内容显示到我们设置为显示的input的内容var name = $('#file').val(); $('#filename').val(name);

    • 为导入按钮设置一个点击事件subForm,在这个地方我们要做俩件事,一个是文件名的筛选,保证上传的文件类型,另一个就是触发上传功能,此处贴代码

    	function subForm() {
    		var filepath = document.getElementById("file").value;
    		var re = /(\\+)/g;
    		var filename = filepath.replace(re, "#");
    		//对路径字符串进行剪切截取 
    		var one = filename.split("#");
    		//获取数组中最后一个,即文件名 
    		var two = one[one.length - 1];
    		//再对文件名进行截取,以取得后缀名 
    		var three = two.split(".");
    		//获取截取的最后一个字符串,即为后缀名 
    		var last = three[three.length - 1];
    		//添加需要判断的后缀名类型 
    		var tp = "xls,xlsx";
    		//返回符合条件的后缀名在字符串中的位置 
    		var rs = tp.indexOf(last);
    		if (rs != -1) {
    		//文件上传函数----------------------------------
    			toImport();
    		} else {
    			layer.alert("文件不是有效xls或者xlsx文件.请重新上传!", 0);
    			document.getElementById("file").value = "";
    			return false;
    		}
    	}
    
    	function toImport() {
    	//with的使用自行百度
    		with (document.forms[0]) {
    			var filepathStr = document.getElementById("file").value;
    			if (filepathStr == "") {
    				layer.alert("请选择要导入的Excel!",0);
    			} else {
    			//后台路径
    				action = "batchInfoAction.do";
    				submit();
    				//设置等待弹窗防止重复提交
    				layer.msg("批量导入需要较长时间,请耐心等待!",{icon:0,time:21600000,shade:[0.5,'#000',true]});
    			}
    		}
    	}
    

    总结

    说白了就是把form隐藏掉,然后使用我们可控的input和按钮等组件来控制不可控的文件上传样式

    展开全文
  • web文件上传

    2015-07-18 16:17:32
    基于Java web实现文件上传功能。JSP页面,文件上传至本地,是一个简单Web练习程序。
  • 文件上传的html页面

    2014-09-11 21:51:59
    只是一个简单的文件上传的html页面。 输入上传人名,点击浏览选择上传文件。 点击提交进行文件的上传
  • h5 web录音并上传后端

    2018-03-01 15:49:16
    这是一个使用h5在web浏览器录音,并提交到后端的demo,若想上传按钮有效,则需要在wen容器下启,因为上传中使用了ajax。
  • 使用springmvc+mybatis从页面进行hadoop2.6 HDFS文件系统的上传,下载和列表展示的Demo希望对大家有用。
  • web页面导入csv文件

    2011-05-25 00:33:18
    web页面导入csv文件 web页面导入csv文件 web页面导入csv文件
  • 一个上传Excel文件并将内容保存到数据库中,附有完整代码,希望对您有帮助.
  • web照片上传页面,样式很好,希望大家使用
  • 通过jquery摄像头插件实现无插件调用usb摄像头进行拍照,
  • 下面是完整的一个HTML页面内容,放在服务器上然后浏览就可以了,只支持Chrome和Safari核的浏览器,Chrome,Safari浏览器都可以。在不同的手机和浏览器上面展现的方式不一样。 <!DOCTYPE HTML> 上传图片 ;...

    下面是完整的一个HTML页面内容,放在服务器上然后浏览就可以了,只支持Chrome和Safari核的浏览器,Chrome,Safari浏览器都可以。在不同的手机和浏览器上面展现的方式不一样。

    <!DOCTYPE HTML>
    <html>
    <head>
    	<title>上传图片</title>
    	<meta charset="utf-8">
    </head>
    <body>
    	<iframe name="uploadfrm" id="uploadfrm" style="display: none;"></iframe>
    	<form name="formHead" method="post" action="" id="formHead" enctype="multipart/form-data" target="uploadfrm">
    
    		<div>
    		    <div>
    		        <input type="file" name="file_head" id="file_head" οnchange="javascript:setImagePreview();" />
    		    </div>
    		    <div>
    		        <div id="DivUp" style="display: none">
    		            <input type="submit" data-inline="true" id="BtnUp" value="确认上传" data-mini="true" />
    		        </div>
    		    </div>
    		</div>
    	</form>
    	<div data-role="fieldcontain">
    	    <div id="localImag">
    	        <img id="preview" width="-1" height="-1" style="display: none" />
    	    </div>
    	</div>
            
    
        <script type="text/javascript">
    		function setImagePreview() {
    			var preview, img_txt, localImag, file_head = document.getElementById("file_head"),
    			picture = file_head.value;
    			if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确,请重新选择!"),
    			!1;
    			if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style.display = "block",
    				preview.style.width = "63px",
    				preview.style.height = "63px",
    				preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);
    			else {
    				file_head.select(),
    				file_head.blur(),
    				img_txt = document.selection.createRange().text,
    				localImag = document.getElementById("localImag"),
    				localImag.style.width = "63px",
    				localImag.style.height = "63px";
    				try {
    					localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",
    					localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt
    				} catch(f) {
    					return alert("您上传的图片格式不正确,请重新选择!"),
    					!1
    				}
    				preview.style.display = "none",
    				document.selection.empty()
    			}
    			return document.getElementById("DivUp").style.display = "block",
    			!0
    		}
        </script>
    </body>
    </html>
    




    原文地址http://blog.csdn.net/jwzhangjie/article/details/40391537

    展开全文
  • 将图片上传到 Asp.net Web Api 工程中带一个控制台程序可以模拟客户端提交图片上传 工程为.NET 4.5,VS2013项目
  • web页面中添加上传输入项 在servlet中读取上传文件的数据,并保存到本地硬盘中。 如何在web页面中添加上传输入项? “file”>标签用于在web页面中添加文件上传输入项,设置文件上传输入项时须注意: 1、必须要设置...
  • web页面加载等待页面

    热门讨论 2008-12-17 16:12:00
    该资源是web页面加载等待页面的一个模板,非常实用,页面很大众化,大家快来下载吧!^_^
  • 用servlet的upload功能实现文件上传很繁琐,代码量很... 下载相关组件(commons-fileupload-xxx.jar及commons-io-xxx.jar)并copy 到项目的WEB-INF/lib 目录下,完成组件的引用; 代码如下:  try{  DiskFileIte...

    用servlet的upload功能实现文件上传很繁琐,代码量很大。可以用fileupload library组件实现文件上传,具体操作步骤如下:

     1. 下载相关组件(commons-fileupload-xxx.jar及commons-io-xxx.jar)并copy 到项目的WEB-INF/lib 目录下,完成组件的引用;

    代码如下:

      try{

           DiskFileItemFactory factory=new DiskFileItemFactory();    //创建一个DiskFileItemFactory工厂

           ServletFileUpload upload=new ServletFileUpload(factory);  //创建一个文件上传解析器

            upload.setHeaderEncoding("UTF-8");            //解决上传文件名中文乱码问题

            //判断上传的数据是否上传表单数据,如果不是则不做处理

            if(!ServletFileUpload.isMultipartContent(request)) {

                  return;   

            }

            //利用ServletFileUpload解析上传数据,解析结果返回的是List<FileItem>

            List<FileItem> list=upload.parseRequest<request>;

            for(FileItem item:List){

                  //如果FileItem中封装的是普通入项数据,

                  if(Item.isFormField()){

                     String name=item.getFieldName();

                     String value=item.getString("UTF-8");

                  } 

                  else {

                        //如果FileItem中封装的是上传文件内容

                        //得到上传文件名

                        String filename=item.getName();

                         if(filename==null || filename.trim().equals("")) {

                              continue;

                         }

                         //如果有些浏览器上传的文件名中带有路径,则截取路径,只保留文件名

                          filename=filename.substring(filename.lostIndexof("\\")+1);

                          InputStream in=item.getInputStream();               //获取item中的上传文件输入流

                          FileOutputStream out=new FileOutputStream(file);         //创建一个文件输出流

                          byte buffer[]=new byte[1024];                                   //创建一个缓冲区

                          //用一个变量标记输入流中的数据是否已经读完

                          int len=0;

                          while((len=in.read(buffer))>0){

                                 out.write(buffer,0,len);

                          }

                         //关闭输入流

                         in.close();

                          //关闭输出流

                         out.close();

                         //关闭上传产生的临时文件

                         item.delete();

                         message="upload ok";

                   }

            }       

      }catch (Exception e){

              message="uplaod failure";

              e.printStackTrace();

      }

      response.getWriter().append(message);

     

     

           

    展开全文
  • java web接收上传文件服务器端示例

    热门讨论 2015-03-15 13:58:37
    做毕业设计的时候Android端要求把相关文件传到服务器端保存,目前这个就是用来接收文件上传请求的简单项目,目前就是在传送参数的时候中文会乱码,但是传送的文件不会乱码
  • .net core 我们都知道用IFormFile 上传文件很方便,但是这种对大文件读取放内存,服务器吃不消,就算你配置,服务器也不可能给你一次性超大文件传输或者长连接,切片上传是最好的解决方案 一、前端对文件进行计算...

    .net core 我们都知道用IFormFile 上传文件很方便,但是这种对大文件读取放内存,服务器吃不消,就算你配置,服务器也不可能给你一次性超大文件传输或者长连接,切片上传是最好的解决方案

     

    一、前端对文件进行计算切割分批请求上传

      HTML源码

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <script src="/lib/jquery/dist/jquery.js"></script>
    </head>
    <body>
        <div class="row" style="margin-top:20%">
            <div class="col-lg-4"></div>
            <div class="col-lg-4">
                <input type="text" value="请选择文件" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">
                <input type="button" value="浏览" onclick="path.click()" style="border:1px solid #ccc;background:#fff">
                <input type="file" id="path" style="display:none" multiple="multiple" onchange="upfile.value=this.value">
                <br />
                <span id="output">0%</span>
                <button type="button" id="file" onclick="UploadStart()" style="border:1px solid #ccc;background:#fff">开始上传</button>
            </div>
            <div class="col-lg-4"></div>
        </div>
    </body>
    </html>

    JavaScript源码

    var UploadPath = "";
    //开始上传
    function UploadStart() {
        var file = $("#path")[0].files[0];
        AjaxFile(file, 0);
    }
    function AjaxFile(file, i) {
        var name = file.name, //文件名
        size = file.size, //总大小shardSize = 2 * 1024 * 1024, 
        shardSize = 2 * 1024 * 1024,//以2MB为一个分片
        shardCount = Math.ceil(size / shardSize); //总片数
        if (i >= shardCount) {
            return;
        }
        //计算每一片的起始与结束位置
        var start = i * shardSize,
        end = Math.min(size, start + shardSize);
        //构造一个表单,FormData是HTML5新增的
        var form = new FormData();
        form.append("data", file.slice(start, end)); //slice方法用于切出文件的一部分
        form.append("lastModified", file.lastModified);
        form.append("fileName", name);
        form.append("total", shardCount); //总片数
        form.append("index", i + 1); //当前是第几片
        UploadPath = file.lastModified
        //Ajax提交文件
        $.ajax({
            url: "/Upload/UploadFile",
            type: "POST",
            data: form,
            async: true, //异步
            processData: false, //很重要,告诉jquery不要对form进行处理
            contentType: false, //很重要,指定为false才能形成正确的Content-Type
            success: function (result) {
                if (result != null) {
                    i = result.number++;
                    var num = Math.ceil(i * 100 / shardCount);
                    $("#output").text(num + '%');
                    AjaxFile(file, i);
                    if (result.mergeOk) {
                        var filepath = $("#path");
                        filepath.after(filepath.clone().val(""));
                        filepath.remove();//清空input file
                        $('#upfile').val('请选择文件');
                        alert("success!!!");
                    }
                }
            }
        });
    }

     

    二、服务器端,获取上传的切割流,存储在临时目录中,完成后拼接临时文件成一个文件,再删除临时文件

    C# 服务器端源码

    [HttpPost]
            public async Task<ActionResult> UploadFile()
            {
                var data = Request.Form.Files["data"];
                string lastModified = Request.Form["lastModified"].ToString();
                var total = Request.Form["total"];
                var fileName = Request.Form["fileName"];
                var index = Request.Form["index"];
    
                string temporary = Path.Combine($"{Directory.GetCurrentDirectory()}/wwwroot/", lastModified);//临时保存分块的目录
                try
                {
                    if (!Directory.Exists(temporary))
                        Directory.CreateDirectory(temporary);
                    string filePath = Path.Combine(temporary, index.ToString());
                    if (!Convert.IsDBNull(data))
                    {
                        await Task.Run(() => {
                            FileStream fs = new FileStream(filePath, FileMode.Create);
                            data.CopyTo(fs);
                        });
                    }
                    bool mergeOk = false;
                    if (total == index)
                    {
                        mergeOk = await FileMerge(lastModified, fileName);
                    }
    
                    Dictionary<string, object> result = new Dictionary<string, object>();
                    result.Add("number", index);
                    result.Add("mergeOk", mergeOk);
                    return Json(result);
    
                }
                catch (Exception ex)
                {
                    Directory.Delete(temporary);//删除文件夹
                    throw ex;
                }
            }
    
            public async Task<bool> FileMerge(string lastModified, string fileName)
            {
                bool ok = false;
                try
                {
                    var temporary = Path.Combine($"{Directory.GetCurrentDirectory()}/wwwroot/" ,lastModified);//临时文件夹
                    fileName = Request.Form["fileName"];//文件名
                    string fileExt = Path.GetExtension(fileName);//获取文件后缀
                    var files = Directory.GetFiles(temporary);//获得下面的所有文件
                    var finalPath = Path.Combine($"{Directory.GetCurrentDirectory()}/wwwroot/", DateTime.Now.ToString("yyMMddHHmmss") + fileExt);//最终的文件名(demo中保存的是它上传时候的文件名,实际操作肯定不能这样)
                    var fs = new FileStream(finalPath, FileMode.Create);
                    foreach (var part in files.OrderBy(x => x.Length).ThenBy(x => x))//排一下序,保证从0-N Write
                    {
                        var bytes = System.IO.File.ReadAllBytes(part);
                        await fs.WriteAsync(bytes, 0, bytes.Length);
                        bytes = null;
                        System.IO.File.Delete(part);//删除分块
                    }
                    fs.Close();
                    Directory.Delete(temporary);//删除文件夹
                    ok = true;
                }
                catch (Exception ex)
                {
                    throw ex;
                }
                return ok;
            }

    三、测试500M的视频成功

     

     

    感谢博客园 天空的影子 博主  ,文章来自https://www.cnblogs.com/bestckk/p/6103065.html 

    翻译 风吹蛋蛋飘~

     

     

    展开全文
  • web上传整个文件夹

    千次阅读 2019-08-21 15:01:40
    Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现。 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所有浏览器。 支持文件批量...
  • web上传小马

    2012-10-07 02:01:04
    构造上传页面,可以上传webshell大马进一步得到网站权限ASP
  • web安全之文件上传漏洞

    千次阅读 2019-06-03 20:11:05
    在大多数情况下,文件上传漏洞一般都是指“上传Web脚本能够被服务器解析”的问题,也就是通常所说的webshell的问题。要完成这个攻击,要满足如下几个条件: 首先,上传的文件能够被Web容器解释执行。所以文件上传后...
  • web大文件上传解决方案

    千次阅读 2019-08-16 09:53:17
    众所皆知,web上传大文件,一直是一个痛。上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的。 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路。 实现文件夹上传,...
  • 在前端页面上传文件到服务器方法示例 1.选择图片 <div class="item1 update_pic" > <span>摘要图片:</span> <img src="${pageContext.request.contextPath}/upload/<s:property ...
  • web页面如何获取上传控件的文件名

    千次阅读 2017-04-24 08:51:53
    web页面如何获取上传控件的文件名 id="id属性值" name='upfileName'/>的文件名? 这个问题很简单.代码如下: var fileName=$('#id属性值').val();
  • 2、验证上传文件的按钮大小和颜色跟需求一致;3、验证点击上传按钮之后能够识别本地的电脑;4、验证上传后的图片能够正常显示出来;5、验证上传的格式不支持规定之外的;6、验证上传的文件大小 不支持范围之外的;7...
  • Java web实现图片上传服务器、同步保存数据库以及如何在前端页面展示教程一、上传二、后端代码处理三、数据库读取图片在前端页面展示(重点) 大概流程: 1.上传插件的选择:此篇博文选择的是jQuery的zyupload文件...
  • 以下为实践项目的页面和功能展示,分别为: 登录页面 列表页面(分页功能) 图片上传功能 富文本编辑器整合使用 实践项目的主要功能和页面就是这些,通过项目展示大家也能够感受到,在实际应用开发中的高频次功能都...
  • public Workbook read(String fileName, boolean flag) throws Exception { Workbook wb = null; String extraFileName = ""; if (flag) { extraFileName = this.getExtensionName...我是从jsp页面上传的文件
  • 微信小程序上传word、txt、Excel、PPT等文件

    万次阅读 热门讨论 2018-06-10 11:08:17
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 ; 正文: ...目前小程序没有能实现此功能的 API 所以我这里通过使用 web-view 实现;...2. 在服务器写一个html,...4.在微信小程序创建一个页面...
  • java+web上传图片保存到数据库

    千次阅读 2019-04-12 11:48:46
    1.上传图片:html代码示例。 <div class="form-group col-sm-12"> <label class="col-sm-2 control-label no-padding-right"><span class="ytRequired"></span>头像:</label> &...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 215,247
精华内容 86,098
关键字:

web上传页面