webuploader上传按钮样式

2024-11-03

记一次项目使用webuploader爬坑之旅

因前端页面开发使用的为VUE开发,又要支持IE9,遂只有基于webuploader封装一个上传组件.地址:https://github.com/z719725611/vue-upload-web,现在版本比项目中的组件版本要低,后期会更新npm版本. webuploader使用html上传,如果低版本就是用flash上传,上传原理就不一一描述了,感兴趣的同学可以到webuploader官网查看. 使用html上传,如谷歌,IE11等基本上并没有什么问题,但是IE9使用fl

上传按钮样式优化 <input type="file" />

<html><head><title>上传按钮样式优化</title> <style>.form-element-file-wapper { position: relative; width: 100px; height: 32px; overflow: hidden; margin: 0 auto;} .form-element-file-wapper button { width: 100px; height: 32px; backgrou

解决WebUploader 上传按钮按F12 才行的问题

遇到了 WebUploader 插件的上传按钮点击无效(此时鼠标在按钮任何位置时,按钮都没变化).按F12 之后才有反应(此时鼠标在按钮任何位置时,按钮颜色都会变深) 的问题,网上查到一些答案,找到了一种测试有效的办法. 首先出现Bug的原因是插件生成[选择文件]按钮的长宽都是0,所以点击不到:需要重新渲染一下网页,而F12正好有渲染网页的功能. 解决办法分以下两步: 1)在页面加一段样式: <style> #filePicker div:nth-child(2){

兼容IE8的flash上传框架"uploadify"自定义上传按钮样式的办法

(uploadify版本:3.2.1 ) 因为公司业务的原因,所做的项目需要兼容IE8,因此做的上传插件无奈选择的是基于flash的uploadify. 由于是基于flash的,所以使用过程中,难以给上传按钮自定义样式,但原来的样式实在不好看,是这样的,或者和项目的UI风格不搭,于是就要想办法自定义一下,最终折腾出了一个兼容性很好的可行方案.以下为解决问题的过程记录和最终方案: 思路一(不可行): 类似于H5的自定义上传控件,将uploadify上传空间的按钮隐藏,自己做一个好看的按钮BTN,在

CSS自定义文件上传按钮样式，兼容主流浏览器

解决办法:使用text文本框及a链接模拟文件上传按钮,并且把文件上传按钮放在他们上面,并且文件上传按钮显示透明.1.图片2. [代码][HTML]代码 <div class="box"> <input type="text" name="copyFile" class="textbox" /> <a href="javascript:void(0);"

input按钮上传按钮样式

主要是定位和不透明度来实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*a upload */ .a-upload { padding: 4px 10px; height: 20px; line-height: 20px; posit

type=file的inpu美化，自定义上传按钮样式

<div class="div1"> <div class="div2">点击上传</div> <input type="file" class="file_input"> </div> css部分: <style> .div1 { position: relative; } .div2 { width: 100px; height: 36px; back

css input[type=file] 样式美化，input上传按钮美化

css input[type=file] 样式美化,input上传按钮美化参考:http://www.haorooms.com/post/css_input_uploadmh

webuploader 百度上传，一个页面多个上传按钮

需求:列表里每条数据需加文件上传 html: <div> <ul class="SR_wrap_pic"></ul> <button type="button" class="btn btn-xs btn-primary SR_btn_pic" onclick="addWebUpload_current(this)"> <i class="fa fa-upload

WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作中遇到的一个问题:公司的后端同事用bootstrap的模态框,结合WebUploadder做后台上传文件的功能的时候,发现上传按钮点击无效.同事过来请求我支援,我研究了下,发现了三种解决方案,下面具体说说是这三种方法是怎么解决的. 我们先来分析一下解决这个问题的思路: 为什么上传控件放到模态框里面就

webuploader的一个页面多个上传按钮实例

借鉴一位大佬的demo 附上他的github地址https://github.com/lishuqi 我把他的cxuploader.js改了不需要预览直接上传图片后拿到回传地址给img标签显示图片 jQuery(function() { uploader = new Array();//创建 uploader数组 // 优化retina, 在retina下这个值是2 var ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWi

WebUploader上传文件（一）

写在前面: 文件上传方式很多的,对于大文件的上传,在本次项目中也有涉及,主要是用了分片断点上传大文件.所以就去了解了一下WebUploader,先从简单的上传文件开始吧~ 在代码中写注释,这样看的比较好点,那就直接上代码来看了解实现的过程吧. 前台jsp页面: <%@ page contentType="text/html;charset=UTF-8" language="java" %> <% String scheme = request.ge

SpringMVC上传图片总结（2）--- 使用百度webuploader上传组件进行上传图片

SpringMVC上传图片总结(2)--- 使用百度webuploader上传组件进行上传图片在上一篇文章中,我们介绍了< SpringMVC上传图片的常规上传方法 >.本文接着第一篇,将继续介绍SpringMVC的上传图片,其中在页面前端利用百度的开源组件WebUploader来进行上传图片,后台继续用SpringMVC来接收处理上传的图片. 百度开源WebUploader的相关资源: 官网地址:http://fex.baidu.com/webuploader/ 快速入门文档:http

百度webuploader 上传演示例子

前端代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="baiduWebUpload.aspx.cs" Inherits="School.Web.TestDemo.baiduWebUpload" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&q

支持移动端裁剪图片插件Jcrop（结合WebUploader上传）

(此教程包括前端实现图片裁剪,后端进行获取裁剪区并保存) 最近有一个需求,微信公众号上传图片,支持自定义裁剪. 以前用过一款裁剪插件cropper,很久没用了,不知道对移动端操作兼容如何,重新从网上搜索更合适的插件首先试过PhotoClip,这个插件裁剪区域是固定的,不能自定义缩放(也许需求太匆忙没有研究透,亦或者可以修改原文件优化这一点),对于用户体验不够好,故,放弃然后又遇到一款插件---Jcrop,完美符合需求,项目结合百度插件 WebUploader上传获取原图,可适配移动端选取相册

input上传按钮美化

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input上传按钮美化</title> <style type="text/css"> /*样式一*/ .a-upload { padding: 4px

webuploader 上传文件参数设置

webUploader 是款很好用的优秀的开源上传组件,由百度公司开发,详细的介绍可参见webUploader 的官方文档: 最近在使用webUploader时,需要添加额外的参数,并在后台获取,参数的格式是json,刚开始一直设置不对,在参考了官网的api文档及相关热心网友的回答后,终于弄明白了webUploader 上传参数的设置.设置的方法一般是在uploader 对象创建后的 fileQueued 或 uploadBeforeSend 事件中设置 ,也可以对webUploader 对

用jQuery File Upload做的上传控件demo，支持同页面多个上传按钮

需求有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为了代码的简洁所以就开始寻求其他的方法,期间试过uploadify,但是由于样式始终调不出来,最后就放弃了,直到发现这么个小巧的玩意,jQuery File Upload. 本文包含了upload的js实现,html的分析,css的实现等内容,文章末尾有git地址最简运行时官网下载的demo有N多

CSS自定义文件上传按钮

今天一同事问我文件上传按钮的问题,情况是这样的,他页面上有3个按钮,分为左中右三个,左边的位按钮甲,右边的位按钮乙,而中间的就是个文件选择按钮,情况大概是这个样子的: 两边的按钮都有了样式,但中间的选择文件的样式死活调不出来,于是我就同他一块解决,后来经过自己设置width,height折腾无果,再求助google终于找到了解决办法,这个方法是这样的: 用一个标签套着文件域,然后调整文件域外边的元素,设置成按钮样式,然后,在把文件域“隐藏”掉(这里的隐藏只是把透明度改为0,这样元素还是存在的),

input美化上传按钮美化

今天工作需求碰到样式改变上传按钮效果: <a href="javascript:;" class="a-upload"> <input type="file" name="" id="">点击这里上传文件 </a> <style type="text/css"> .a-upload { padding: 4px 10px; height

webuploader 上传文件生成链接下载文件

最近在asp.net MVC 项目需要实现一个Excel和图片上传功能.之前有使用过SWFUpload 做过上传图片功能,在本次实现过程中,有人推荐WebUploader 上传组件,因此采用web-Uploader 来实现文件上传功能. WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6

webuploader上传按钮样式

热门专题