第一步:npm install ng2-file-upload --save 安装 ng2-file-upload 第二步:在需要使用该插件的页面的对应module文件的imports中引入CommonModule  和  FileUploadModule 第三步:在对应的组件文件中引入并声明: 以下是new FileUploader()需要传入的参数列表,?号表示可选: 第四步:在组件.ts对应的html文件中添加input标签:如下: multiple表示多选:    第五步:在组件.ts文…

引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所以比较好的是上传之前先在本地预览一下.       之前做项找插件的时候就知道纯前端可以实现图片本地预览,可今天面试的时候被问到时竟然一脸懵逼,然后竟然无意中就在电脑桌面发现了实现的demo,然后根据demo查了一下API,稍微总结下: 首先得拿到File对象 当用input标签上传图片时event…

最近是被这项目搞疯了.害我天天写插件,上周才写,现在就继续吧..... 说说这个吧.主要是用于本地图像预览的.我们知道在以前,图像预览一般都很麻烦,一般都是异步上传然后返回路径,动态设置路径,但是这样的效率不言而喻,而使用这种技术一般情况下,就是flash.silverlight或者是三方axtiveX插件了,而这些技术一般都很难实现跨平台.跨浏览器.跨设备的情况,而且表现不一,从另一个方面来说,这种技术是web依赖了第三方,不通用.而自从HTML5诞生以来,这样的思路就被打破了.HTML5提供…

/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插件网站:http://keleyi.com/keleyi/phtml/image/16.htm *参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法; *使用方法: <div> <img id…

方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * @param {Object} previewObj 预览图片的父层id元素  fresh-send-preview-imgvideo     * @param {Number} maxWidth 预览图最大宽       * @param {Number} minWidth 预览图最小宽    …

使用jQuery在上传图片之前实现缩略图预览 jQuery代码 01 $("#uploadImage").on("change", function(){ 02     // Get a reference to the fileList 03     var files = !!this.files ? this.files : []; 04    05     // If no files were selected, or no FileReader supp…

本地预览的意思是,在选择图片之后先不上传到服务器,而是由一个<img>标签来预览本地的图片,非 IE8/9 浏览器可以从<input type="file"/>中获取到图片流,然后设置到<img src="">进行显示,但 IE8/9 浏览器只能获取到本地图片的绝对路径,并且设置 src 是无效的. 解决上面问题的方式是采用 css 图片滤镜,示例代码: <!-- 要设置图片预览区域的大小 --> <p clas…

之前由于项目需要,决定使用angularjs做前端开发,在前两个项目中都有文件上传的功能,因为是刚接触angularjs,所以对一些模块和模块间的依赖不是很了解.都是由其他大神搭好框架,我只做些简单的填充. 现在拿出些时间来研究一下.主要针对一些插件的用法,现总结一下(以file upload 为例): angular file upload.js 的第一行是 var angularFileUpload = angular.module('angularFileUpload', []); 这里他…

jquery file upload php代码分析首先进入构造方法 __construct() 再进入 initialize()因为我是post方式传的数据  在进入initialize()中的post()也就是说 经过上面的分支 最终进入的post()  在1255行 看到这个        $upload = isset($_FILES[$this->options['param_name']]) ?            $_FILES[$this->options['param_na…

本例中采用的是 JQuery File Upload + ASP.NET 的方式, Google了大半天基本没有找到合理的解决方案,倒是在 NodeJS的一遍博客中找到了灵感:http://www.it165.net/pro/html/201306/6047.html 出现该问题的原因在于 Jquery File Upload 修改了Json的格式! 即 jQuery file upload plugin的接口变了,由:[{file1},{file2}] 变为了 {files: [{file1}…

笔者看到mvc最近比较流行,而很多使用一些比较旧的的方法上传图片,再次安利一下百度的webuploader控件吧 webuploader第一步要先下载一些插件这点可以在webuploader官网上下载.http://fex.baidu.com/webuploader/ 开始的时候第一步引用webuploader 需要引用的是一个css文件和一个js文件 接下来就是实例化插件(术语不标准233)和创建马上预览的图片和一个div用来过会添加图片 <tr> <td>上传图片</td…

笔者看到mvc最近比较流行,而很多使用一些比较旧的的方法上传图片,再次安利一下百度的webuploader控件吧 webuploader第一步要先下载一些插件这点可以在webuploader官网上下载.http://fex.baidu.com/webuploader/ 开始的时候第一步引用webuploader 需要引用的是一个css文件和一个js文件 接下来就是实例化插件(术语不标准233)和创建马上预览的图片和一个div用来过会添加图片 <tr> <td>上传图片</td…

前些天公司要求在微信移动端做上传图片并预览的功能,要求能够调用摄像头拍照并立即预览. 在网上搜了一些方法,开始自己写了个简单的功能实现代码.结果发现移动端拍照出来的图片动不动就2M+,又因为要批量上传,为用户的流量和上传速度考虑,我决定做一下优化,看能不能在预览前就压缩一下图片尺寸. 结果又是一阵百度,发现一个靠谱的封装好的base64图片预览及压缩的方法. 直接上下载地址吧: http://www.imwinlion.com/wp-content/uploads/2016/05/localre…

//上传图片后立即预览 file对象,图片容器id function showImg(fileObj,imgId) { var file=fileObj.files[0]; var r = new FileReader(); r.readAsDataURL(file); $(r).load(function() { $('#'+imgId).attr("src", this.result); }) } <input type="file" onchange=&…

以前知道input[type=file]可以上传文件,但是没用过,今天初次用,总感觉默认样式怪怪的,想修改一下,于是折腾了半天,总算是小有收获. 以上是默认样式,这里我想小小的修改下: HTML代码如下: <form action="" name="file" class="file"> 上传文件<input type="file" id="img" name="img"…

平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上.或者使用前端插件.这篇博客使用的是HTML5的新特性——FileReader.由于兼容性,这种方法不适合pc端...FileReader具体的兼容性点这里:FileReader兼容性. 自从有了HTML5的FileReader对象以后,预览图片变得简单多了,不再需要后台的配合,并且JS操作本地文件已经成为了可能.这种方法的思路是:通过readAsDataURL(file)方法把图片文件转成base6…

今天实现上传图片到服务器 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> <img src="" class="img"> </div> <input type="file" class="imgInput"> 注:img就是用来显示预览图片的 然后就是jQuery代码,很简单 $(".imgInput&quo…

一.读取文件的对象 — new FileReader()   上传图片接口参数有图片base64编码(数组, imgBase64List ),主要用到 读取文件的对象 [ new FileReader()  ] //获取文件 var file = $("#imgForm").find("input")[0].files[0]; //创建读取文件的对象 var reader = new FileReader(); //创建文件读取相关的变量 var imgFile;…

简介 krpano可以利用js调用第三方网页版地图,因此可以实现导航效果,用来帮助用户导航到我们全景所在的位置. 效果截图如下,在手机端点击左侧按钮,便会对用户进行定位,跳转至高德地图进行导航      使用说明 插件共有3个文件,如下图所示: nv.js为js代码,主要作用为浏览器定位,生成地图调用uri等. nv.xml为样式文件,定义了krpano中按钮的位置 navigation.png为图标 使用时,把上述3个文件复制到项目目录,修改xml文件中的目的地参数即可. desloc对应于目…

简介 最近几天研究了如何在krpano全景的基础上实现记录浏览量和点赞次数,写了一个插件,方便大家使用. 效果截图如下: 每当有用户打开该全景页面时,浏览量会自动加1: 用户可以主动点击点赞按钮,点击后,赞的数量加1,第二次点赞会取消点赞. 使用说明 插件共有5个文件,如下图所示: 前三个文件为图片,可以自行修改定义不同的样式 va.min.js 为js代码,用于控制点赞,与后台交互等操作 va.xml为xml文件,用于配置样式 使用时,把上述5个文件复制到项目目录,在你的xml文件里添加如下的…

简介 在krpano生成的全景支持HTML5在手机中展示,而在手机中打开全景网址时不方便,需要输入网址. 最近研究了如何让krpano全景根据自己当前的网址,自动生成二维码,并在电脑浏览时,可以展示出来,效果如下: 点击后,会根据屏幕自动放缩到合适大小,方便手机进行二维码扫描. 使用说明 插件有两个文件 把他们复制到项目目录下,在你项目的xml文件中,添加如下的代码即可: <include url="qr.xml" devices="desktop" />…

wxml <!-- 图片预览 --> <view class='preview-warp' wx:if="{{urls}}"> <image src='{{urls}}' /> </view> <view class="prew_video" hidden="{{chooesVideo==''}}"> <video bindfullscreenchange="bindVi…

最近在使用markdown做笔记,编辑器Sublime Text3用起来很轻巧,现在让他支持markdown的语法并且可以实时预览. 安装准备——安装Package Control Package Control是一个开源的用于插件管理的插件,在为Sublime安装其他插件之前,需要安装它.它有两种安装方式Simple和Manual.此处我们选择simple方式来安装. 从菜单 View - Show Console 或者 ctrl + ~ 快捷键,调出 console.将以下 Python 代…

为了方便大家使用 vscode 发布博文,我们做了一个小插件,今天发布预览版,欢迎大家试用并反馈问题与建议. 插件的英文名称是 Cnblogs Client For VSCode,简称是 vscode-cnb,下载地址 https://marketplace.visualstudio.com/items?itemName=cnblogs.vscode-cnb 插件安装好之后会在 activity bar 中出现写代码小人的图标,点开后点击 Login 按钮登录. 登录后会看到自己博客的最新随笔…

<input type="file" name="img-up" id="img-up" value="" /> $("#img-up").on("change",function () { if(this.files[0]){ getImgBase64Data(this.files[0], function (result) { console.log(result); }…

html: <img id="pic" src="" ><input id="upload" name="file" accept="image/*" type="file" style="display: none"/> input:file事件是上传类型 较常用的属性值如下: accept:表示可以选择的文件MIME类型,多个MIME类型用…

百度了很久,国内一直 找不到 使用jquery file upload 插件 +asp.net 的相关代码 一开始使用 jquery uploadify ,一款基于 flash的插件,但是不支持 Safari浏览器 (苹果设备没戏了). 于是想换 纯js或jquery的插件,但是 苦苦没 找到,不知道大家都用什么好方法实现. 于是 开始下面的 代码...   下面一些js里面的 分析是 自己调试 + 看源码得出的结论 非官方api(没找见) 的结果,只是为了满足自己的项目,没有深究. 如有不正确…

前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(PS : 不得不承认我这个人有多懒,没有需求的时候我向来不主动去学习).移动端完全支持哦!已测试. 下面给大家看看代码吧怎么实现的 第一:HTLM部分(这里不去做漂亮的样式了我们注重学习功能) <input type="file" id="fileElem" mul…

jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m…

//plupload 集成 Ext.define('ux.plup.File', { extend: 'Ext.form.field.Text', xtype: 'plupFile', alias: ['widget.plupFile'], requires: ['Ext.form.trigger.Component', 'Ext.button.Button', 'Ext.window.Toast'], //plup对象 uploader: null, //上传文件最大数量限制,最小只能设置为1…