- 综合排序
- 最热优先
- 最新优先
- 来自专栏IMWeb前端团队
H5上传图片
最近做产品小A的需求，设计到图片的上传问题，整理一下。 PC上传图片 基本结构 form[enctype="multipart/form-data"] input[type="file"] 上传完毕后，获取图片url，显示到页面上 问题 图片要上传完毕后，才能显示 压缩上传 H5 如何解决 FileReader canvas FileReader FileReader可以将File对象转化成base64，这样可以优先展示图片，然后处理上传操作。 base64 使用mqq接口拍照或者获取本地图片时，反馈都是base64格式，input在处理过程中，经过压缩等操作也可能将File对象转化成base64，对base64的上传支持有以下方案： server 支持，单独开接口处理base64上传 前端将base64转化成File对象，复用原来的server接口 这里重点讨论第2中方案。
2.2K100发布于 2017-12-29 - 来自专栏IMWeb前端团队
H5上传图片
本文作者：IMWeb helondeng 原文出处：IMWeb社区 未经同意，禁止转载 最近做产品小A的需求，设计到图片的上传问题，整理一下。 PC上传图片 基本结构 form[enctype="multipart/form-data"] input[type="file"] 上传完毕后，获取图片url，显示到页面上 问题 图片要上传完毕后，才能显示 压缩上传 H5 如何解决 FileReader canvas FileReader FileReader可以将File对象转化成base64，这样可以优先展示图片，然后处理上传操作。 base64 使用mqq接口拍照或者获取本地图片时，反馈都是base64格式，input在处理过程中，经过压缩等操作也可能将File对象转化成base64，对base64的上传支持有以下方案： server 支持，单独开接口处理base64上传 前端将base64转化成File对象，复用原来的server接口 这里重点讨论第2中方案。
1.2K10发布于 2019-12-04 - 来自专栏飞扬的花生
Html5上传插件封装
前段时间将flash的上传控件替换成使用纯js实现的,在此记录 1.创建标签 <div class="camera-area" style="display:inline-block;float ，第二个是<em>上传</em>进度,第三个为了<em>上传</em>的预览 2.封装<em>上传</em>插件 //拓展 $.extend($.fn, { fileUpload: function (opts) { (); xhr.upload.addEventListener("progress", funs.uploadProgress, false);//监听上传进度 file:后台接收此文件的参数 id:当前是冗余拓展，博主本意是上传到服务器后返回个url，url指向上传文件的服务器路径 4.控制器接收文件并且保存(简单实现) [HttpPost file.SaveAs(fileName); return this.Json(new { success = true }); } 5.
4.3K80发布于 2018-01-18 - 来自专栏deepcc
HTML5上传图片预览
DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv="Content-Type" content="text/
5.4K20发布于 2018-07-05 - 来自专栏deepcc
HTML5上传图片预览
DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv="Content-Type" content="text/
5.8K50发布于 2018-05-16 - 来自专栏代码小睿
HTML5 拖拽上传图片实例
因为标题写的是实例，所以本次就不做讲解了，因为这个实例我也算是东拼西凑整出来的，参考了大概5、6款拖拽上传的插件和demo，然后把其中好的地方挑出来，最后就成了这么一个实例，一起来看下吧（地址不能保证长久有效 ，之所以选这个的原因就是，我很容易做扩展，它支持3种方式添加图片，一种拖拽上传，一种常规的选择文件上传，另外的就是添加网络图片。 它很巧妙的把三种上传模式整合到了一起，而且你可以用IE浏览器浏览下，如果不支持HTML5，是没有拖拽上传图片的提示的，如图： 拖拽上传最重要的就是js部分的代码，它实现了70%的功能，另外30%仅仅是把图片信息提交到后台 主要实现代码是从“功能实现”开始的，这块具体为何这样操作，原理是什么，我就不多说了，大家可以参考下这篇文章：《人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata 最后就是上传部分的PHP代码了，这里我只是提供个参考，你可以根据项目的需求来自己编写。
3.9K30编辑于 2022-03-23 - 来自专栏仙士可博客
H5图片压缩与上传
现在手机用户拍照照片都十分巨大,1m-10m,而普通用户的上传带宽大概为100kb/s-1m/s,导致上传图片十分缓慢 解决方法为上传之前先把图片进行压缩,使得上传速度增加,服务器硬盘,带宽速度压力也更小 ,可以直接通过img标签的src属性进行取值上传,如 ? 将img的src值存到input进行直接的form表单上传 或者ajax获取值直接上传 后台代码为 if(! $upload->getSysSetPath();//目录地址 $new_file = md5(uniqid($this->member_info['member_id'])).". {$type}";//用微秒和会员id产生md5唯一字符串 if (file_put_contents($path.
2.6K11发布于 2019-12-19 - 来自专栏前端之攻略
HTML5+APP 拍照压缩上传 原
HandheldFriendly" content="true" /> <meta name="MobileOptimized" content="320" /> <title>Hello H5+ function upload() { if(files.length <= 0) { plus.nativeUI.alert("没有添加上传文件！") if(status == 200) { alert("上传成功") console.log(t.url) //http else { alert("fail") wt.close(); } } ); task.addData("client", "HelloH5+ > 主要用到html5+拍照与压缩插件 在拍照成功后会返回图片保存的路径，如上面的p参数，在压缩图片时要用到p，overwrite: true不能省略。
1.5K31发布于 2019-04-04 - 来自专栏明明如月的技术专栏
UploadiFive jquery html5上传插件使用
UploadiFive jquery html5上传插件使用[带项目源码] 插件地址：http://www.uploadify.com/ 插件文档：http://www.uploadify.com/documentation www.uploadify.com/demos/ 项目和库下载(已更新，如无法下载留言或者留邮箱)： 链接: https://pan.baidu.com/s/1XtZZnYI4oqqGqmo4khn5Hg 密码:6xl4 UploadiFive 是 jquery html5上传插件 Uploadify 是基于flash的 jquery上传插件 建议flash已经过时 因此考虑用UploadiFive
2.2K10发布于 2021-08-27 - 来自专栏云前端
浅谈h5文件上传
前言 近期的需求中包含了上传头图（图片）和上传菜品（excel文件）的功能，商家可灵活上传使用自己制作的问卷图片，用户评价上传的菜品。 今天就针对我在做图片上传和excel上传时遇到的一些问题，跟大家分享一下 一、选择文件功能 相信大家都知道，要在前端实现图片的上传，我们离不开的是一个 <input>type=file 的 input 三、文件上传 1、上传图片并预览 选择图片，预览（base64），不真正传给后台，而是页面保存的时候传给后台(base64格式) 选择图片，预览(base64)，上传给后台，后台返回图片地址(url)， 保存页面时，再次提交上传成功后后台返回的图片地址(url) 选择图片，上传给后台，后台返回图片地址(url)，页面预览，保存页面时，再次提交上传成功后后台返回的图片地址(url) 如果我们先将图片上传到服务器 return window.webkitURL.revokeObjectURL(url) } } 文件预览（在线预览Web Office） 参考资料： https://juejin.im/post/5a0545a75188254d2b6d979c
3.7K10发布于 2020-06-16 - 来自专栏卯金刀GG
HTML5上传图片，后台使用java
-- 未上传之前，显示提示上传信息，通过给div.certification-item-tips添加hidden类来控制隐藏 --> <div class="certification-item-content ; //图片方向角 added by lzk var Orientation = null; if (file) { console.log("正在上传 attr("src", base64); }; }; oReader.readAsDataURL(file); } } /** 记录上传数据 ; }else if(result == false){ alert('上传失败！') pw.print(jsrs.toString()); pw.close(); } 3.2 springservice代码 /** * 文件上传
4.3K11发布于 2019-07-26 - 来自专栏前端皮小蛋
5分钟搞定图片裁剪，上传
大多数功能都是由 Cropper.js封装好的，调整并制作了： 上传图片 对图片的裁剪以及调整（旋转、缩放）、 实时预览 将裁剪后的数据保存为blob发送至后端。 ? ? 就是用来设置我们需要实时预览的地方，但是设置完成之后要给上述的两个div添加一下样式，才可以正常显示 .previewBox,.previewBoxRound{ box-shadow: 0 0 5px Q5：如何获取裁剪数据并发送至后端？ 解决图片过大的问题： 给添加固定宽度样式 #cropImg{ height: 450px; width: 450px; box-shadow: 0 0 5px #adadad; } 2.重复上传的问题 再次上传不同图片的时候，还是出现原来的图片，只需要在上传文件的时候，对之前存在的CROPPER进行摧毁就可以了 function uploadImg
6K12发布于 2020-03-02 - 来自专栏销声匿迹
文件上传之Html5 + jQuery上传、asp.net web api接收
"file" multiple="multiple" />
<input id="btnUploadFile" type="button" value="<em>上传</em>文件2.8K30发布于 2020-09-03 - 来自专栏黄啊码【CSDN同名】
TP5用webuploader实现图片上传
__ADMIN__"); //重点推荐 <script src="$admin/plugins/webuploader-0.1.5/webuploader.min.js"></script> 整合TP5 btns">
开始上传 'public/uploads'); if($info) { return json_encode($info->getSaveName()); } } 5、上传限制（图片个数和类型 = function( code ) { if(code == "Q_EXCEED_NUM_LIMIT") { layer.alert("只能上传 $maxnumber 张图片" ); } else if(code == "F_DUPLICATE") { layer.alert("重复上传"); } else { layer.alert3.1K40发布于 2020-05-29来自专栏StephenHTML5实现大文件分片上传
在网页中直接上传大文件一直是个比较头疼的问题，一是上传时间长，中途一旦出错会导致前功尽弃；二是服务端配置复杂，要考虑接收超大表单和超时问题，如果是托管主机没准还改不了配置，默认只能接收小于4MB的附件 这么做的好处在于一旦上传失败只是损失一个分片而已，不用整个文件重传，而且每个分片的大小可以控制在4MB以内，服务端不用做任何设置就可适应。 好在现在有了HTML5，我们可以直接构造分片了，这是一个非常喜人的进步，但是有一个最大的缺陷就是，不支持IE啊，不支持IE啊，不支持IE啊。 计算每一片的起始与结束位置 var start = i * shardSize, end = Math.min(size, start + shardSize); //构造一个表单，FormData是HTML5新增的
1.8K10编辑于 2022-06-07来自专栏SpringBootspringmvc + h5(进度条)文件上传
1.先上效果图 1.1弹出附件框 1.2选择文件，点击上传(这里做了一个简单的校验) 1.3点击上传 1.4上传成功 刷新列表 2. 知识点准备 2.1XMLHttpRequest 2.2H5 progress 2.3Springmvc 2.4Maven项目下需要的Jar包 <dependency> <groupId>commons-fileupload fuJiaList">
上传文件(文件最大不能超过5M)<label class="col-sm-4">请选择要上传的文件< { alert("文件大小超过5M，不能上传！")3.2K10发布于 2018-11-05来自专栏葡萄城控件技术团队MVC5：使用Ajax和HTML5实现文件上传功能
引言 在实际编程中，经常遇到实现文件上传并显示上传进度的功能，基于此目的，本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能。 基本功能：实现带有进度条的文件上传功能 高级功能：通过拖拽文件的操作实现多个文件上传功能 背景 HTML5提供了一种标准的访问本地文件的方法——File API规格说明，通过调用File API 能够访问文件信息 XMLHTTPRequest2是HTML5的无名英雄，XHR2与XMLHttpRequest大体相同，但同时也添加了很多新功能，如下： 1. 增加了上传/下载二进制数据 2. 跨资源共享请求 这些新特性都使得Ajax和HTML5很好的协作，让文件上传变得非常简单，不再需要使用Flash Player、外部插件或html的<form>标签就可以完成，根据服务器端就可以显示上传进度条 本文会编写一个小型应用程序，能够实现以下功能： 上传单个文件，提供上传进度信息显示。 将图片发送到服务器时，创建图像缩略图。 通过文件列表或拖拽操作实现多个文件上传。
5.4K101发布于 2018-01-10来自专栏HTHTML5矢量实现文件上传进度条
在HTML中，在文件上传的过程中，很多情况都是没有任何的提示，这在体验上很不好，用户都不知道到时有没有在上传、上传成功了没有，所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件上传进度条 ，矢量在《矢量Chart图表嵌入HTML5网络拓扑图的应用》一文中已经讲述了关于setCompType()方法的应用，今天我们用setImage()方法充分利用系统中定义好的矢量资源来实现文件上传进度条 那么接下来我们来模拟文件上传进度，让进度条动起来。 再者，我们需要结合ajax无刷新向服务器上传文件，并结合socket技术监听服务器事件，在浏览器如何使用socket可以参考：HT for Web的HTML5树组件延迟加载技术实现。 progress.setValue(val); }); e.preventDefault(); }, false); 如此，基于HT for Web自定义类实现HTML5文件上传进度条的页面设计及代码设计全部完成
3.3K80发布于 2018-01-03来自专栏大师级码师通过 html5 FileReader 实现上传图片预览功能
Html 部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="file" name="file" onchange="showPreview(this)" />
<
2.2K00发布于 2021-09-22来自专栏Android开发指南5.post上传和压缩、插件模拟请求
MultipartEntity(); entity.addPart("actimg", new FileBody(file)); post.setEntity(entity); 多张图片上传 :写个循环，用键值，可以用BasicNameValuePair，也可以用file，循环添加，也可以用base64变成string上传 Base64:byte[]-->string 上传图片,语音: 存对象到 //4. string-->byte[]; byte[] bitmapByteArr = Base64.decode(bitmapString, Base64.DEFAULT); //5. }); post的content-type application/x-www-form-urlencoded :表单类型-->key-value，默认 multipart/form-data :文件上传 initPostJsonString(jsonString); File file = new File(""); initPostFile(file); } /** * 文件的上传
2.6K90发布于 2018-05-14
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号