在PHP项目开发中,有时候经常需要做添加图片的功能.添加图片时,一般需要即时预览上传的图片.下面这个例子就是简单的预览上传图片功能,代码如下(分两部分): 1.HTML代码: <div class="c-zt-pic">    <img id="preview" src=""> </div>   <div style="margin-bottom: 20px;">   <i…
uploadPreview.js是一款图片上传前的预览插件.谷歌.火狐.IE都可以兼容,但是不支持safari. 相关的html代码: <!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/…
//index.html <form class="form-horizontal"> <div class="panel panel-default"> <div class="panel-body"> <div class="container-fluid"> <div class="row"> <div class="form…
html: <img id="pic" src="" ><input id="upload" name="file" accept="image/*" type="file" style="display: none"/> input:file事件是上传类型 较常用的属性值如下: accept:表示可以选择的文件MIME类型,多个MIME类型用…
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3</title> <script> function getFullPath(obj) { if (obj) { //Internet Explorer if (window.navigator.userAgent.indexOf("MSIE") >= 1)…
在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使用JSSDK方式,使用微信的SDK接口进行图片的上传.预览操作,后来发现通过URL.createObjectURL选定本地图片预览.上传也是非常方便的,本篇随笔针对同一个多图片的业务需求,使用JSSDK和URL.createObjectURL两种方式进行图片预览.上传.删除等常规的处理. 1.使用J…
摘要 有这样的需求需要在手机端预览图片的时候,实现图片的手势拖动,放大缩小功能.最终通过touch.js这个插件实现了效果. touch.js Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具. Touch.js的代码已托管于github并开源,希望能帮助国内更多的开发者学习和开发出优秀的App产品. Touch.js手势库专为移动设备设计, 请在Webkit内核浏览器中使用. 核心代码 imgView为图片的容器img标签. va…
方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * @param {Object} previewObj 预览图片的父层id元素  fresh-send-preview-imgvideo     * @param {Number} maxWidth 预览图最大宽       * @param {Number} minWidth 预览图最小宽    …
/** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBase64UrlToBlob(base64){ var base64Arr = base64.split(','); ){ //如果是图片base64,去掉头信息 base64 = base64Arr[]; } // 将base64解码 var bytes = atob(base64); var by…
上传预览图片的插件jquery-fileupload github地址:https://github.com/blueimp/jQuery-File-Upload 中文文档:http://www.jq22.com/jquery-info230 步骤 引包 <!-- jquery ui小部件,上传插件依赖了jquery ui的小部件 --> <script src="js/vendor/jquery.ui.widget.js"></script> &l…