展开

关键词

DropZone(文

1. html文dropzone的原理是模拟表单来,html中的元素有多重形式。 maxFilesize : 限制文的大小,单位是MB;acceptedFiles : 允许的文类型,文扩展名以逗号隔开,格式见实例;autoProcessQueue : 默认为true,即拖入文立即自动 ;常用事:addedfile : 添加文是发生removefile : 手动从服务器删除文时发生success : 成功后发生complete:当文成功或失败之后发生。 canceled:当文时被取消的时候发生。maxfilesreached:当文数量达到最大时发生。maxfilesexceeded:当文数量超过限制时发生。 totaluploadprogress : 文中的返回值,第一个参数为总进度(0到100),第二个为总字节数,第三个为总字节数,利用这几个参数,可计算出速度,和剩余时间;完整示例:

1.1K00

WebUploader文

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文。 qq-pf-to=pcqq.group各个参数的说明文档中都有,可以详细参考一下文档,再这里给大家列出一个的实现,如有不足的地方希望大家指出,谢谢。 引入bootstrap的js 接着写容器的DOM 选择文 选择文 清空 最后初始化webuploader组,设置等事监听。 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: #picker, 不压缩image, 默认如果是jpeg,文前会压缩一把再! ... + ); }); 文过程中创建进度条实时显示。

67830
  • 广告
    关闭

    50+款云产品免费体验

    提供包括云服务器,云数据库在内的50+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Html5封装

    前段时间将flash的替换成使用纯js实现的,在此记录1.创建标签 div内部有3个标签 第一个是,第二个是进度,第三个为了的预览2.封装 拓展 $.extend 获取文大小,也可以在这里获取文格式,限制用户非要求格式的文 fileSelected: function () { var files = (doms.fileToUpload).files; else fileSize = (Math.round(file.size * 100 1024) 100).toString() + KB; } funs.uploadFile(); }, 异步 id:当前是冗余拓展,博主本意是到服务器后返回个url,url指向的服务器路径4.控制器接收文并且保存(简单实现) public ActionResult SavePhoto () { fileName要和视图的参数一致 HttpPostedFileBase file = HttpContext.Request.Files; string savePath = Path.Combine

    1K80

    emlog新浪图床

    有很多站长觉得做站久了,网站的图片把加载速度拖垮了,所以很多站长喜欢使用图床外链,让网站速度和加载更快 今天杨小杰给大家带来一款新浪图床,其实这个一直在计划内,只是苦于《杨小杰博客wodpress 版》的移植工作,所以没有去研究,眼看新年到,wp站也正式线了,就抽空把这个写了出来,原理其实很简单,新浪外链前台版很多站长都有用过。 但是这个就厉害了,这个是后台版的,写文章的时候就可以入。 emlog新浪图床更新介绍: 把以前前台的新浪外链搬到了后台 一键的图片,手机电脑都可以很方便 自定义图片高度、宽度、title描述和alt描述(title和alt描述如果为空就会获取文章标题填补 ) css样式的优化,尽量浓缩在浓缩 以就是此次发布更新介绍 该需要jQuery支持,如果发现按钮不能点击的,请引用jQuery,内已附带一个jQuery.min.js文,如需引用请在yxjsinaimg.php

    27130

    UploadiFive jquery html5使用

    UploadiFive jquery html5使用地址:http:www.uploadify.com 文档:http:www.uploadify.comdocumentation例子: 已更新,如无法下载留言或者留邮箱):链接:  https:pan.baidu.coms1XtZZnYI4oqqGqmo4khn5Hg  密码:6xl4UploadiFive 是 jquery html5 Uploadify 是基于flash的 jquery建议flash已经过时 因此考虑用UploadiFive 查询了很多,很多不好用。 可以再次基础进行修改。

    4410

    plupload附IE8问题

    前段时间遇到一个plupload问题,在其他浏览器面运行很正常,但是就是在IE8面第一次点击按钮无反应,后面再连续点击才ok。

    30930

    jquery-uploadifyv3.2.1 文 学习

    服务器处理路径 Options,下面是可设置的属性 auto : true, Automatically upload files when added to the queue,是否添加以后就自动 using CSS to style the button buttonText : SELECT FILES, The text to use for the browse button 文的名字 ,并可以重新 successTimeout : 30, The number of seconds to wait for Flash to detect the servers response //完成onUploadComplete: function(file) {alert(The file + file.name + finished processing.); }方法:$( #file_upload).uploadify(cancel,*); 有*的话,则队列里的所有会 删掉或,没有则作用于 第一个$(#file_upload).uploadify(upload,

    18232

    emlog新浪+接口 V1.1

    image.png emlog后台写文章新浪图片 第一次写emlog,参考了七牛图床的写法(对,就是后台那个)推荐两个一起使用下载后直接到emlog后台即可,无需解压 (这话谁说的, 站出来,保证不打死你) 具体使用方法在设置界面有写,下载地址在文章底部 哪位好心人有emlog的开发者账号,可以帮我提交到emlog应用中心里注意: GitHub打包下载的zip压缩包文名会被加 -master包括里面压缩的子文夹,需要重命名为SinaUpload才能,否则emlog会报错 仅限emlog博客系统使用,其他博客系统无法使用 以下是公开接口,可自行编写其他系统 接口地址 img.52ecy.cnhomeInterface 请求参数说明: 名称 说明 username 幻想领域账号 password 幻想领域密码 multipart(可选) falsetrue,使用本地还是远程 更新日志: 2018年5月28日 灰常抱歉,因为之前配置文有误,回调函数无法被正常读入,导致图片成功无法

    22430

    plupload多文出现blob的问题处理

    第一次使用plupload,后发现出现了一个blob文,同时有的文并没有被,这是什么鬼,大概的搜了下,有遇到这个问题的,不过没有几个实质性的解决了的这个问题还是得靠自己了。 查了下,chunk_size 用来设置块的大小,也就是把一个文分成这么大的块来进行,看来问题就是出在这儿了。把这项设置的值加大,改成10mb或者100mb,再测试就没这问题了。 说下原因:chunk_size 可以把文分成多块来,这样可以绕过服务器允许的最大大小的限制,前提是需要接口支持文。 这个参数一般设置成与服务器允许的最大文大小一致就可以了,或者是接口支持文

    55330

    图片裁切cropper的使用

    图片格式一般是文格式和base64格式,比较方便的是图片格式,后台可以方便的处理的图片。 查看效果首先引入cropper的样式和js HTML结构 头像 裁切预览 150 * 150 选择图片 图片 css样式 .uploadPicTitle{line-height:35px;border-bottom var formData = new FormData(); var newImg = new Date().getTime() + .png; 给图片添加文名 如果没有文名会报错 formData.append processData: false, 不处理数据 contentType: false, 不设置内容类型 success: function(data) { console.log(data) alert(成功 ) var data = JSON.parse(data); 如果后台过来是Json格式的文 不需要再次转换,转换的话会报错 var data = data; } })}) 将base64格式图片转换为文形式

    51910

    Git 项目推荐 | html5 异步批量

    使用html5的ajax批量的工具 。 描述: javascript异步,包含3个子项目BUpload, JUpload, TUpload.BUpload : 基于HTML5, UI仿百度编辑器的图片, 支持图片,浏览图片 ,和图片搜索,支持图片预览,有进度条TUpload : 基于HTML5, UI仿腾讯的QQ空间图片,支持图片预览,有进度条。 JUpload : 基于iframe的异步依赖:jQuery-1.7.1以版本使用demoBUpload $(#upload-btn).on(click, function() { new BUpload({ upload_url : upload.php

    659130

    JQuery文ajaxFileUpload在Asp.net MVC中的使用

    0 ajaxFileUpload简介ajaxFileUpload是一个非常简单的基于Jquery的异步,使用过程中发现很多与这个同名的,基于原始版本基础之修改过的,文版本比较多 ,我把我自己使用的ajaxFileUpload文到博客园了,想要使用的朋友可以下载:http:files.cnblogs.comfilesfonourajaxfileupload.js。 整个源码不到200行,实现非常简单,大致原理就是通过js动态创建隐藏的表单,然后进行提交操作,达到附的目的,主要实现在源码里都有注释,不难理解,我们也可以基于此简单版本实现更复杂的操作。 ,添加了onchange事,在选择文后立即,onchange时间定义如下。 ,避免文重复

    72990

    产品新丨即时通信 IM 优化

    导语 为了让开发者在接入腾讯云即时通信IM时,能够更方便、快速、安全的使用富文本资源功能,我们基于腾讯云对象存储技术自研了 SDK tim-upload-plugin,在速度、数据安全性 本文主要介绍这款自研的优势和接入方式。 简介 tim-upload-plugin即腾讯云即时通信IM,是基于腾讯云对象存储预签名 URL 方式实现资源。 开发者在集成腾讯云即时通信IM时使用 tim-upload-plugin 可以彻底替代 cos-js-sdk 或 cos-wx-sdk 的资源功能,该不仅提升了应用数据的安全性,而且具有速度快 支持多种格式文 可以支持 JPG、JPEG、PNG、BMP、GIF 五种格式的图片,MP4 格式的视频,语音以及 word、excel、pdf 等普通文。 欢迎各位用户体验即时通信IM tim-upload-plugin,同时也欢迎各位用户在使用的过程中出给我们提意见或者建议! AndroidiOS ? 小程序 ? Flutter ?

    19520

    产品新丨即时通信 IM 优化

    为了让开发者在接入腾讯云即时通信IM时,能够更方便、快速、安全的使用富文本资源功能,我们基于腾讯云对象存储技术自研了 SDK tim-upload-plugin,在速度、数据安全性、平台兼容性方面都具有明显优势 本文主要介绍这款自研的优势和接入方式。 ? 简介 tim-upload-plugin即腾讯云即时通信IM,是基于腾讯云对象存储预签名 URL 方式实现资源。 开发者在集成腾讯云即时通信IM时使用 tim-upload-plugin 可以彻底替代 cos-js-sdk 或 cos-wx-sdk 的资源功能,该不仅提升了应用数据的安全性,而且具有速度快 支持多种格式文 可以支持 JPG、JPEG、PNG、BMP、GIF 五种格式的图片,MP4 格式的视频,语音以及 word、excel、pdf 等普通文。 欢迎各位用户体验即时通信IM tim-upload-plugin,同时也欢迎各位用户在使用的过程中出给我们提意见或者建议! AndroidiOS ? 小程序 ? Flutter ?

    20250

    前端——头像截图的使用(带后台)

    效果图:实现头像,右边是预览,有三个大小,可以对头像进行裁剪?HTML:toParentData 和 img 返回的是图片裁剪后的base64编码。 头像编辑 var BASE = ${BASE}; Loading... 这里给出JAVA在后台解析base64并存储为文的代码。 HttpServletRequest request) { String username = shiroUtils.getUserName(); boolean success = true; try{ Log.debug(的数据 ,图片数据为空); }else{ String ; data = d; }else{ throw new Exception(失败,数据不合法); } } Log.debug(对数据进行解析,获取文名和流数据

    1.6K50

    ASP.NET MVC 4 中JqueryUploadify简单使用-版本:3.2.1

    需要修改uploadify.css中取消按钮的背景图片路径:.uploadify-queue-item .cancel a { background: url(..imguploadify-cancel.png no-repeat; float: right; height: 16px; text-indent: -9999px; width: 16px;}3.页面添加样式表和脚本库的引用:  4.页面添加用于生成按钮的标签 ) { 一个文成功后的响应事处理12 var data = $.parseJSON(data);13 alert(data.imgpath);14 }15 });16 });6.后台代码: 1 public ActionResult Upload(HttpPostedFileBase Filedata) 2 { 3 没有文,直接返回 4 if (Filedata == null || 动态设置的方法在开始之前执行都是可以的,该试例在两个checkbox(通过bootstrap-switch美化)的状态切换时进行设置: $(#img_mode).on(switch-change,

    60650

    TP5(thinkPHP5框架)基于bootstrap实现的单图用法示例

    本文实例讲述了TP5(thinkPHP5框架)基于bootstrap实现的单图用法。分享给大家供大家参考,具体如下:1-引入js文和css文

    14330

    支持多文,预览,拖拽,基于bootstrap的fileinput 的ajax异步(转载)

    首先需要导入一些js和css文   中文包,不需要可以不用导入html代码    js代码$(#file-1).fileinput({  uploadUrl: , 必须设置个路径进入php代码部分   allowedFileExtensions : ,允许的文类型  overwriteInitial: false,  maxFileSize: 1500,文的最大大小 单位是k  maxFilesNum : 10,最多文数量    allowedFileTypes: ,  slugCallback: function(filename) {    return filename;  }});php代码 $file=$_FILES;获取称文的信息,数组形式$date = $file;文的名称$date = $file;文的大小$date = $file;文的类型然后进行,用ajax返回一个错误信息或者成功信息直接用

    77730

    基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文File Input的使用

    Bootstrap文File Input是一个不错的文,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控在界面呈现,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文File Input的使用。 1、文File Input介绍这个主页地址是:http:plugins.krajee.comfile-input,可以从这里看到很多Demo的代码展示:http:plugins.krajee.comfile-basic-usage-demo 这是一个增强的 HTML5 文输入控,是一个 Bootstrap 3.x 的扩展,实现文预览,多文等功能。 2、文File Input的使用一般情况下,我们可以定义一个JS的通用函数,用来初始化这个的,如下JS的函数代码所示。

    73690

    图片预览制作----URL.createObjectURL()

    # 2.兼容性兼容性查询:https:developer.mozilla.orgzh-CNdocsWebAPIURLcreateObjectURL#Browser_Compatibility# 制作步骤 ()function preview(that,options) { 接受files数组列表 var _file = that.files,str = ; console.log(_file); 限制图片的最大值 if(_file.length > options.maxLen){ alert(最多 + options.maxLen + 张图片!) } function preview(that,options) { 接受files数组列表 var _file = that.files,str = ; console.log(_file); 限制图片的最大值 if(_file.length > options.maxLen){ alert(最多 + options.maxLen + 张图片!)

    32510

    相关产品

    • 设计协作平台

      设计协作平台

      腾讯自研的产品设计研发一站式协作平台,支持在线导入预览Sketch设计稿、自动生成设计标注切图,灵活调用图标库、素材库,支持多种插件上传,让产品设计更轻松高效。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券