fileinput

附件上传组件uploadify的使用

由 不羁岁月 提交于 2019-12-05 09:24:20
1、bootstrap-fileinpu的简单介绍 在前面的随笔，我介绍了Bootstrap-table表格插件的具体项目应用过程，本篇随笔介绍另外一个Bootstrap FieInput插件的使用，整合两者可以实现我们常规的Web数据导入操作，导入数据操作过程包括有上传文件，预览数据，选择并提交记录等一系列操作。 关于这个插件，我在早期随笔《 Bootstrap文件上传插件File Input的使用 》也做了一次介绍，这是一个增强的 HTML5 文件输入控件，是一个 Bootstrap 3.x 的扩展，实现文件上传预览，多文件上传等功能。 bootstrap-fileinput源码： https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API： http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示： http://plugins.krajee.com/file-basic-usage-demo 这个插件主要是介绍如何处理图片上传的处理操作，原先我的Excel导入操作使用的是Uploadify插件，可以参考我随笔《 附件上传组件uploadify的使用 》，不过这个需要Flash控件支持，在某些浏览器（如Chrome

九宫格图片制作

由 本秂侑毒 提交于 2019-12-05 05:03:08
1.原理及说明 九宫格图片就是将一张图片分成9份，再拼成一个完整的图片，如图： 原理：创建9个正方形容器，利用背景图定位，每个容器只显示其中的一部分，最终拼接成一张完整的图片 实现思路： (1)使用flex布局，让9个子元素以 3*3 的形式摆放 (2)因为图片有纵向和横向两种可能，所以要对图片的宽高比进行判断，以此来判断图片的方向，并根据图片的方向决定背景图定位信息。 (3)将图片的url放入文本框中，通过按钮点击事件将url对应的图片设置成容器的背景图 (4)使用FileReader()读取本地选中的图片时，会花费1-2s的时间，在此时间内显示一个蒙版遮罩，用来提示用户“加载中...” (5)为了美化按钮，使用了bootstrap 2.HTML代码 HTML代码分为3个部分： (1)操作区，包括文本输入框和按钮 (2)九宫格图片区，用于显示背景图 (3)蒙版遮罩 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 引入bootstrap -->

关于谷歌浏览器fileinput需要打开两次选择图片界面的问题

由 给你一囗甜甜゛ 提交于 2019-12-05 02:25:03
1，如下图。图片上传设置了fileinput的属性，做成这种点击上传图片触发原先fileinput的选择图片按钮的事件。火狐浏览器没有问题。谷歌浏览器每次需要打开两次弹出图片的界面。最后发现是因为隐藏了type=file上传文件的原因。因此最后解决办法如下。如果是谷歌浏览器。将type=file的框先show然后再隐藏。就是说选择图片的时候这个上传文件的文本框是不能隐藏的。 $(".uploadpre").click(function () { var useragent = navigator.userAgent; if (useragent.indexOf("Chrome") > -1) { $(this).parent().parent().find('[type="file"]').val(''); $(this).parent().parent().find('[type="file"]').show().trigger("click").hide(); } else { $(this).parent().parent().find('[type="file"]').trigger("click"); } }); 来源： CSDN 作者： zhudiwoaini 链接： https://blog.csdn.net/zhudiwoaini/article/details

Krajee file-input widget &#039;upload&#039; method throws exception

由 匿名 (未验证) 提交于 2019-12-03 02:35:01
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I am using fileinput widget form krajee: http://plugins.krajee.com/file-input What I am doing wrong using 'upload' method ? When I upload files by pressing upload button everything works great. But when try to use upload method like this: $( '#projectFiles' ).fileinput( 'upload' ); I get an error: Uncaught TypeError: Cannot read property 'undefined' of undefined in line 989. I checked this is this line: formdata.append(self.uploadFileAttr, files[i]); and files are undefined there. So what am I doing wrong? My code: [js] $( "#projectFiles" )

Video.js - play a blob (local file @ the client) created with createObjectURL

由 匿名 (未验证) 提交于 2019-12-03 01:23:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I would like to play a video locally (without uploading it to the server). I can do that in pure javascript and html5 like so: html: <video id="video1"></video> <input type="file" id="fileInput" multiple /> javascript with jQuery: var $video = $('#video1'); $video.prop('src', URL.createObjectURL($('#fileInput').get(0).files[0])); $video.get(0).play(); and it works. but with video.js with the following code: var myPlayer = videojs('video1').ready(function () { // ready var filename = URL.createObjectURL($('#fileInput').get(0).files[0]); this

AttributeError: FileInput instance has no attribute &#039;__exit__&#039;

由 匿名 (未验证) 提交于 2019-12-03 01:23:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I am trying to read from multiple input files and print the second row from each file next to each other as a table import sys import fileinput with fileinput.input(files=('cutflow_TTJets_1l.txt ', 'cutflow_TTJets_1l.txt ')) as f: for line in f: proc(line) def proc(line): parts = line.split("&") # split line into parts if "&" in line: # if at least 2 parts/columns print parts[1] # print column 2 But I get a "AttributeError: FileInput instance has no attribute ' __exit__ '" 回答1: The problem is that as of python 2.7.10, the fileinput module

Angular ViewChild fileInput annotation is undefined

由 匿名 (未验证) 提交于 2019-12-03 01:08:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: If my fileInput element is in a normal div, then it works fine. But if I place it inside <ng-template></ng-template> then I am getting it undefined. Here is my code : HTML <ng-template #content let-c="close" let-d="dismiss"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"></button> </div> <div class="modal-body"> <form #documentsForm="ngForm" (ngSubmit)="onEditSubscriberDocumentsSubmit(documentsForm.value);documentsForm.reset()"> <input

Save Multiple Image Files Using Kartik FileInput Widget

由 匿名 (未验证) 提交于 2019-12-03 00:58:01
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I am currently using Yii2 PHP framework and Kartik FileInput widget in my system. I have used followed this guide of input file uploads on multiple files but it didn't work in my system. I am currently using MongoDB as my database. Here's my progress so far (original, single upload only): Controller , actionCreate if($model->load(Yii::$app->request->post())) { $model->attachment = UploadedFile::getInstance($model, 'attachment'); if($model->attachment) { $path = 'archive/contact/' . $model->attachment->baseName . '.' . $model->attachment-

vue项目富文本编辑器vue-quill-editor之自定义图片上传

由 匿名 (未验证) 提交于 2019-12-02 23:49:02
1、如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的，如果需要上传图片到自己的服务器，需要修改配置。 /*富文本编辑图片上传配置*/ const uploadConfig = { action: '', // 必填参数 图片上传地址 methods: 'POST', // 必填参数 图片上传方式 token: '', // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage name: 'img', // 必填参数 文件的参数名 size: 500, // 可选参数 图片大小，单位为Kb, 1M = 1024Kb accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' // 可选 可上传的图片格式 }; // toolbar工具栏的工具选项（默认展示全部） const toolOptions = [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{'header': 1}, {'header': 2}], [{'list': 'ordered'}, {'list': 'bullet'}], [{'script': 'sub'}, {'script'

bootstrap fileinput +springmvc图片上传-krajee

由 匿名 (未验证) 提交于 2019-12-02 20:21:24
引入的文件 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" /> <!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below --> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9
订阅 fileinput