网站建设动画教程代理网址ip

当前位置： 首页 > news >正文

网站建设动画教程,代理网址ip,西安seo外包价格,企业画册的设计效果文件上传在WEB开发中应用很广泛#xff0c;我们经常发微博、发微信朋友圈都用到了图片上传功能。 文件上传是指将本地图片、视频、音频等文件上传到服务器上#xff0c;可以供其他用户浏览或下载的过程。 今天我给大家聊聊常见的文件#xff08;图片#xff09;上传的方式…文件上传在WEB开发中应用很广泛我们经常发微博、发微信朋友圈都用到了图片上传功能。 文件上传是指将本地图片、视频、音频等文件上传到服务器上可以供其他用户浏览或下载的过程。 今天我给大家聊聊常见的文件图片上传的方式和要点处理。 表单上传 这是传统的form表单上传使用form表单的input[type”file”]控件可以打开系统的文件选择对话框从而达到选择文件并上传的目的它的好处是多浏览器兼容它是web开发者最常用的一种文件上传方式。 表单的代码如下 form methodpost actionhttp://uploadUrl enctypemultipart/form-datainput namefile typefile acceptimage/gif,image.jpg /input nametoken typehidden /input typesubmit value提交 / /form 以下是表单上传几个关键点 method”post” 采用post方式提交数据enctype”multipart/form- data”采用multipart格式上传文件此时request头会显示 Content-Type:multipart/form-data; boundary—-WebKitFormBoundaryzr34cwJ67R95KQC9action标明上传的服务端处理地址type”file”使用input的file控件上传如果是多文件批量上传可以将input[type”file”]的name属性设置为如name”file[]”accept属性是HTML5的新属性它规定了可通过文件上传提交的文件类型上传的触发事件可以是input[type”file”]的onChange触发也可以由一个独立的按钮的onClick使整个表单提交此时还可以用input[type”hidden”]带一些其它的参数比如Token来源验证等等。 Ajax无刷新上传 Ajax无刷新上传的方式本质上与表单上传无异只是把表单里的内容提出来采用ajax提交并且由前端决定请求结果回传后的展示结果不用像直接表单上传那样刷新和跳转页面。在这里我们采用jQuery来作为操作DOM和创建ajax提交的js基础库。 html代码片段如下 forminput idfile namefile typefile /input idtoken nametoken typehidden / /form javascript代码片段如下 \((#file).on(change, function(){var formData new FormData();formData.append(file, \)(#file)[0].files);formData.append(token, \((#token).val());\).ajax({url: http://uploadUrl,type: POST,data: formData,processData: false,contentType: false,success: function(response){// 根据返回结果指定界面操作}}); }); 我们使用了file控件的change来触发上传事件当然你也可以使用某个按钮来触发表单提交。提交数据时我 用到了FormData对象来发送二进制文件FormData构造函数提供的append()方法除了直接添加二进制文件还可以附带一些其它的参数 作为XMLHttpRequest实例的参数提交给服务端。 使用jQuery提供的ajax方法来发送二进制文件还需要附加两个参数 processData: false // 不要对data参数进行序列化处理默认为truecontentType: false // 不要设置Content-Type请求头因为文件数据是以 multipart/form-data 来编码 Flash上传 很 多时候上传的需求要求显示上传进度、中断上传过程、大文件分片上传等等这时传统的表单上传很难实现这些功能于是产生了使用Flash上传的方式它采 用Flash作为一个中间代理层代替客户端跟服务端通信此外它也对客户端的文件选择方面拥有更多的控制权比input[type”file”] 要大得多。 在这里我使用了jQuery封装好的uploadify插件来进行演示一般这类插件都自带了上传用的Flash文件因为跟服务端回传的数据和展示跟客户端的交互都是Flash文件的接口跟插件来对接的。 div idfile_upload/div html部分很简单预留一个hook后插件会在这个节点内部创建Flash的object并且还附带创建了上传进度、取消控件和多文件队列展示等界面。 \((function() {\)(#fileupload).uploadify({auto: true,method: Post,width: 120,height: 30,swf: ./uploadify.swf,uploader: http://uploadUrl,formData: {token: \((#token).val()},fileObjName: file,onUploadSuccess: function(file, data, response){// 根据返回结果指定界面操作}}); }); 关于jQuery.uploadify可以访问了解http://www.uploadify.com/documentation/。值得注意的是flash并不适合手机端应用更好的解决方案是使用flashhtml5来解决平台的兼容性问题。 截图粘贴上传 我们发现现在有好多上传应用已经提供了截图粘贴上传功能如WebUploader它就支持QQ截图然后粘贴上传。 首先截图粘贴上传的核心思想是监听粘贴事件然后获取剪切板中的数据如果是一张图片则触发上传事件。 代码片段如下 \)(textarea).on(paste, function(e){e.stopPropagation();var self this;var clipboardData e.originalEvent.clipboardData;if (clipboardData.items.length 0) {return;}var file clipboardData.items[0].getAsFile();if (!file) {return;}var formData new FormData();formData.append(file, file);formData.append(token, \((#token).val());\).ajax({url: http://uploadUrl,type: POST,data: formData,}).done(function(response) {// 根据返回结果指定界面操作});e.preventDefault(); }); 从上面代码可以看出上传的过程都是一样的主要是获取文件的方式。 当进行粘贴右键paste/ctrlv操作时触发剪贴板事件’paste’从系统剪切板获取内容而系统剪切板的数据在不同浏览器保存在不同的位置 IE内核windows.clipboardData其它e.originalEvent.clipboardData 拖拽上传 拖拽上传的方式支持的浏览器比较少因为它用到了HTML5的两个新的属性API一个是Drag and Drop,一个是File API。 上传域监听拖拽的三个事件dragEnter、dragOver和drop分别对应拖拽至、拖拽时和释放三个操作的处理机制当然你也可以监听dragLeave事件。 HTML5的File API提供了一个FileList的接口它可以通过拖拽事件的e.dataTransfer.files来传递的文件信息获取本地文件列表信息。 File API在HTML5规范中只是草案在 W3C 草案中File 对象只包含文件名、文件类型和文件大小等只读属性。但部分浏览器在草案之外提供了一个名为 FileReader 的对象用以读取文件内容并且可以监控读取状态它提供的方法有 “readAsBinaryString” ”readAsDataURL” ”readAsText” ”abort” 等。 代码片段如下 // dragenter\((#textarea).on(dragenter, function(e){e.preventDefault(); });// dragover\)(#textarea).on(dragover, function(e){e.preventDefault(); });// drop$(#textarea).on(drop, function(e){e.stopPropagation();e.preventDefault();var files e.originalEvent.dataTransfer.files;.each(files, function(file) {if (!/^image/.test(file.type)) {return;}var fileReader new FileReader();fileReader.onload function() {//uploadFile(file);};fileReader.readAsDataURL(file);}); }); 拖拽上传过程中的几个关键点 在drop事件触发后通过e.dataTransfer.files获取拖拽文件列表在jQuery中是e.originalEvent.dataTransfer.files拖拽上传仅支持图片文件对象中file.type标识了文件类型。由于可能是多图拖拽所以可以遍历图片上传这里用了Underscore的each方法。这里用readAsDataURL读取文件内容为二进制文件你还可以将其转换为Base64方式上传只是http协议里面存在对非二进制数据的上传大小限制为2M。上传的过程跟前面的方式相同即创建FormData对象并发起Ajax请求。 拍照上传 拍照上传可以是PC上的摄像头拍照上传也可以是手机等移动设备的拍照上传。手机上的拍照上传最常见就是我们使用微信发照片了。 手机实现拍照上传的代码 input typefile acceptimage/ input typefile acceptvideo/* ios 有拍照、录像、选取本地图片功能部分android只有选取本地图片功能。 上传与安全 上传文件时必须做好文件的安全性除了前端必要的验证如文件类型、后缀、大小等验证重要的还是要在后台做安全策略。 这里我列举几个注意点 后台需要进行文件类型、大小、来源等验证定义一个.htaccess文件只允许访问指定扩展名的文件。将上传后的文件生成一个随机的文件名并且加上此前生成的文件扩展名。设置上传目录执行权限避免不怀好意的人绕过如图片扩展名进行恶意攻击拒绝脚本执行的可能性。