众所周知JavaScript在设计上处于安全角度考虑，是不允许读写本地文件的（原因请自行百度）； 但是在实际项目应用中，经常会使用到上传图片，并且可以让用户直接预览图片。对于此种做法有两种方法可以实现：一是前后台交互，后台将图片地址返回前端； 二是，我今天写的内容，使用FileReader对象——允 ...
分类：
Web程序 时间：
2017-11-07 16:25:12
阅读次数：
240
在一次的项目中，需要用户上传图片，目前市场随便一个手机拍出来的照片都是好几兆，直接上传特别占用带宽，影响用户体验，所以要求对用户上传图片进行压缩后再上传；那么前端怎么实现这个功能呢？ 亲测可将4M图片压缩至100kb左右，代码如下： CSS样式如下（形成图片预览效果）： 其原理是通过canvas结合 ...
分类：
其他好文 时间：
2017-11-06 11:24:49
阅读次数：
226
项目中遇到上传图片，需要本地预览效果，测试时无意间发现，当选择A图片，然后更换为B图片，完全正常；当选择A图片，取消该图片，再测选择A图片后，发现不会再生成预览效果，出现了bug； 查找相关资料后，终于找到了两个解决办法； 方法一：来回切换input[type='file']的type属性值，可以是 ...
分类：
Web程序 时间：
2017-11-02 13:18:06
阅读次数：
265
最近在工作中遇到一个问题，就是实现一个反馈页面，这个反馈页面的元素有反馈主题、反馈类型、反馈内容、反馈人联系电话以及反馈图片。前端将这些反馈的元素POST给后台提供的接口；实现这个工作的步骤就是：页面布局——功能实现； 页面布局非常简单，难就难在功能，如果没有反馈图片这个元素，那么功能实现就更简单了 ...
分类：
Web程序 时间：
2017-10-29 23:51:41
阅读次数：
426
在微信小程序中预览图片分为 a、预览本地相册中的图片。 b、预览某个wxml中的多张图片。 分析：实质其实是一样的。都是给wx.previewImage传入参数 这里拿b、预览某个wxml中的图片列表来讲解bindtap的传值问题。a、预览本地相册。可以结合wx.chooseImage接口来实现，这 ...
分类：
微信 时间：
2017-10-27 01:23:48
阅读次数：
389
1.表单上传 最传统的图片上传方式是form表单上传，使用form表单的input[type=”file”]控件，打开系统的文件选择对话框，从而达到选择文件并上传的目的。 form表单上传 表单上传需要注意以下几点： (1).提供form表单，method必须是post。 (2).form表单的en ...
分类：
Web程序 时间：
2017-10-18 15:02:29
阅读次数：
658
两种js实现方式，一种用原生的ajax；另一种用JQuery，例子比较简单，直接上代码。 注意： 1、用JQuery方式需要加两个参数 contentType: false 和processData: false，设置ajax不需要序列化file文件对象 2、两种方式在组织参数时都需要适用var f ...
分类：
Web程序 时间：
2017-10-16 21:50:26
阅读次数：
217
我用islider都是结合react来使用,主要运用在移动端,做首页轮播图,或者是手机图片预览,左右滑动 首先需要 npm install islider.js --save 让后在jsx文件头部引入一下文件 然后初始化islider 初始化之后就可以在生命周期里面调用了 详细应用参考官方文档 ...
分类：
其他好文 时间：
2017-10-12 22:54:39
阅读次数：
275
