jqweui实现图片上传预览

需要js cs上官网：jqweui: jqweui (gitee.com)

附代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1, minimum-scale=1,user-scalable=no"><title>图片预览上传</title><link rel="stylesheet" href="css/weui.min.css"><link rel="stylesheet" href="css/jquery-weui.css"><link rel="stylesheet" href="css/demos.css"><link rel="stylesheet" href="css/weuix.css"><link rel="stylesheet" href="css/store.css"><script src="js/zepto.min.js"></script><script src="js/zepto.weui.js"></script><script src="js/lrz.min.js"></script><script>// 图片预览$(function(){var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>';var $uploaderInput = $("#uploaderInput"); //上传按钮+var $uploaderFiles = $("#uploaderFiles");    //图片列表var $galleryImg = $(".weui-gallery__img");//相册图片地址var $gallery = $(".weui-gallery");$uploaderInput.on("change", function(e){var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;for (var i = 0, len = files.length; i < len; ++i) {var file = files[i];if (url) {src = url.createObjectURL(file);} else {src = e.target.result;}$uploaderFiles.append($(tmpl.replace('#url#', src)));}});$uploaderFiles.on("click", "li", function(){$galleryImg.attr("style", this.getAttribute("style"));console.log(this)$gallery.fadeIn(100);});$gallery.on("click", function(){$gallery.fadeOut(100);});});// 压缩上传function removeimg(obj){$.confirm('您确定要删除吗?', '确认删除?', function() {$(obj).remove();});return false;}function uploadimg(obj) {lrz(obj.files[0],{width:750,fieldName:"file"}).then(function(data) {$.post("/upimg",{imgbase64: data.base64},function(rs){$(obj).parent().prev().html('<li onclick="removeimg(this)" class="weui-uploader__file" style="background-image:url(/'+rs.src+')"><input value="'+rs.src+'"  type="hidden"  name="file" /></li>');},'json');}).then(function(data) {}).catch(function(err) {console.log(err);});}</script></head><body><div class="body1"><div class="weui-uploader"><div class="weui-uploader__bd"><ul class="weui-uploader__files" id="uploaderFiles"><div class="weui-uploader__file-content"><i class="weui-icon-warn"></i></div></ul><div class="weui-uploader__input-box"><input id="uploaderInput" class="weui-uploader__input" accept="image/*" multiple="" type="file" onchange="uploadimg(this)"></div></div></div></div><script src="js/jquery-2.1.4.js"></script><script src="js/fastclick.js"></script><script>$(function() {FastClick.attach(document.body);});</script><script src="js/jquery-weui.js"></script></body>
</html>

jqweui实现图片上传预览相关推荐

Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
js实现图片上传预览及进度条
js实现图片上传预览及进度条原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
java 图片上传预览 demo_图片上传预览
[实例简介] 实现图片上传预览,可以增加新的空数组,并上传和替换.还有删除功能:提交的时候,还可以判断是否有空的img [实例截图] [核心代码] 613ddc50-96b8-4197-ba2e-1e ...
JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
ASP.NET工作笔记之一：图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
Bootstrap 3 : 图片上传预览 image upload preview
头部均为: <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel= ...
模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

jqweui实现图片上传预览

jqweui实现图片上传预览相关推荐

最新文章

热门文章