Weui 结合 xmlHttpRequest 上传图片

一、html部分

<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

.demos-sub-title {
text-align: center;
color: #888;
font-size: 14px;
}

.demos-header {
padding: 35px 0;
}

.demos-content-padded {
padding: 15px;
}

.demos-second-title {
text-align: center;
font-size: 24px;
color: #3cc51f;
font-weight: 400;
margin: 0 15%;
}

footer {
text-align: center;
font-size: 14px;
padding: 20px;
}

footer a {
color: #999;
text-decoration: none;
}

</style>

<link href="__STATIC__/index/layer_mobile/need/layer.css" type="text/css" charset="utf-8" >

<link rel="stylesheet" href="__STATIC__/index/jsweui/lib/weui.min.css">
<link rel="stylesheet" href="__STATIC__/index/jsweui/css/jquery-weui.css">
</head>
<body ontouchstart>

<div class="weui-gallery" id="gallery">
<span class="weui-gallery__img" id="galleryImg"></span>
<div class="weui-gallery__opr">
<a href="javascript:" class="weui-gallery__del">
<i class="weui-icon-delete weui-icon_gallery-delete"></i>
</a>
</div>
</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__bd">
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">图片上传</p>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles">

</ul>
<div class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file" accept="image/jpg,image/jpeg,image/png" >
</div>
</div>
</div>
</div>
</div>
</div>

// $('#uploaderInput').on('change', function(e){
// console.log(this.files);

// var src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式

// var picHtml='<li class="weui-uploader__file" style="background-image:url('+src+')"></li>';
// $('#uploaderFiles').append(picHtml);

// });

</script>

二、js部分

/*
* @Author: anchen
* @Date: 2019-01-19 15:13:59
* @Last Modified by: anchen
* @Last Modified time: 2019-02-14 16:37:05
*/

var post={};//ajax 传值 obj
var imgs_files=new Array();
var imgs_arr=new Array();

$(function() {
var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"><input type="hidden" name="imgs[]" value="#src#"></li>',
$gallery = $("#gallery"),
$galleryImg = $("#galleryImg"),
$uploaderInput = $("#uploaderInput"),
$uploaderFiles = $("#uploaderFiles");

$uploaderInput.on("change", function(e) {
//判断张数
var c_len=$('input[name="imgs[]"]').length;
if(c_len>=2){

$.toast("最多只能上传2张", "text");
return false;
}

var src, url = window.URL || window.webkitURL || window.mozURL,
files = e.target.files;

//console.log(files);

for(var i = 0, len = files.length; i < len; ++i) {
var file = files[i];

//imgs_files[i]=file;
imgs_files.push(file);

if(url) {
src = url.createObjectURL(file);
} else {
src = e.target.result;
}

var type=file.type;

$uploaderFiles.append($(tmpl.replace('#url#', src).replace('#src#', type+','+src)));

}

console.log(imgs_files);
console.log('imgs_files');

});
var index; //第几张图片
$uploaderFiles.on("click", "li", function() {
index = $(this).index();
$galleryImg.attr("style", this.getAttribute("style"));
$gallery.fadeIn(100);
});
$gallery.on("click", function() {
$gallery.fadeOut(100);
});
//删除图片
$(".weui-gallery__del").click(function() {
$uploaderFiles.find("li").eq(index).remove();
imgs_files.splice(index,1);
console.log(imgs_files);
});
});

// $('textarea[name=content]').bind('change',function(e){
// console.log(e.target.value);
// });
$('input[name=title]').bind('input',function(e){

var len=e.target.value.length;
if(len>100){
var content=$(this).val();
$(this).val(content.substring(0,100-1));
$.toptip("标题长度不能超过100",1000,"error");
}
});

$('textarea[name=content]').bind('input',function(e){
// console.log(e);
// console.log(e.target.value);
// console.log(e.target.value.length);
var len=e.target.value.length;
if(len<=200){
$('.content-len').html(len);
}else{
var content=$(this).val();
$(this).val(content.substring(0,200-1));
$.toptip("内容长度不能超过200",1000,"error");
}
});

$('#wd-but').click(function(){
var title=$('input[name=title]').val();
var content=$('textarea[name=content]').val();
// post.data=$('.wdForm').serialize();
var action=$('.wdForm').attr('action');
if(title.length<1){
$.toptip("请填写标题",1000,"error");
return;
}
if(title.length>100){

$('input[name=title]').val(title.substring(0,100-1));
$.toptip("标题长度不能超过100",1000,"error");
return;
}
if(content.length<1){
$.toptip("请填写内容",1000,"error");
return;
}
if(content.length>200){
$('textarea[name=content]').val(content.substring(0,200-1));
$.toptip("内容长度不能超过200",1000,"error");
return;
}

// var img_obj=$('input[name="imgs[]"]');

// if(img_obj.length>0){
// var imgs=new Array();
// var j=0;
// for(var i=0 in img_obj){
// imgs[j]=img_obj[i].value;

// console.log(i);
// console.log(img_obj[i].value);
// j++;
// if(j>=img_obj.length){
// break;
// }
// }
// post.imgs=imgs;
// }

post.title=title;
post.content=content;
// post.imgs_files=imgs_files;

// console.log(imgs_files);
//return;
$.showLoading('提交中。。');
if(imgs_files.length>0){
fileXmlSend(imgs_files[0]);
}else{

$.post(action,post,success,'json');
function success(rdata){

$.hideLoading();

console.log(rdata);
$.toast(rdata.msg, "text");
if(rdata.code==1){
setTimeout(function(){
location.href=rdata.l_rurl==undefined||rdata.l_rurl==''?'/':rdata.l_rurl;
},1000);
}else{

}

}
}

//console.log($('input[name="imgs[]"').length);

});

function fileXmlSend(files){

var xhr = new XMLHttpRequest()
,formData = new FormData()
,respos = '';

formData.append('Filedata',files);

xhr.onreadystatechange = function(){
console.log(xhr.readyState);
console.log(xhr.status );

if(xhr.readyState == 4 && xhr.status == 200){
respos = xhr.responseText;

var responseInfo=jQuery.parseJSON(respos);

console.log(responseInfo);

if(responseInfo.code==1){

imgs_arr.push(responseInfo.file);
var file_len=imgs_files.length;
var imgs_len=imgs_arr.length;
if(file_len==imgs_len){
var action='/index/article/wenda_handle.html';
post.imgs_arr=imgs_arr;
console.log(post);
$.post(action,post,success,'json');
function success(rdata){

$.hideLoading();

console.log(rdata);
$.toast(rdata.msg, "text");
if(rdata.code==1){
setTimeout(function(){
location.href=rdata.l_rurl==undefined||rdata.l_rurl==''?'/':rdata.l_rurl;
},1000);
}

}
}else{
var img_index=imgs_len;
fileXmlSend(imgs_files[img_index]);
}
}else{//出错

$.toast(responseInfo.msg, "text");

}

}
xhr.open('POST',"/index/article/img_upload.html",1);
xhr.send(formData);

}

转载于:https://www.cnblogs.com/alienchan/p/10375475.html

Weui 结合 xmlHttpRequest 上传图片相关推荐

weui uploader java_实例 | WEUI框架uploader上传图片,传入服务器
// js $(function() { // 允许上传的图片类型 var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/g ...
weui上传文件完整例子php,weui实现图片上传
您现在的位置是:网站首页>>前端技术>>weui weui实现图片上传发布时间:2019-04-30 16:37:17作者:wangjian浏览量:1657点赞量:0 在we ...
WEUI文件上传详解
本文通过我个人设计的系统为案例来教会读者使用weui的uploader,先来看看效果图: 图片上传框 PC端移动端首先,微信的官方文档不会一步一步教会你怎么用,但是在其中能发现很多使用的细节,推荐 ...
weui uploader java_weui.js---uploader
html: 图片上传 0/5 js: var uploadCount = 0, uploadList = []; var uploadCountDom = document.getElementByI ...
微信公众号开发Django 图片处理
title: 微信公众号开发Django-图片处理 date: 2018-06-21 17:03:39 tags: [微信公众号,Django] 微信公众号开发,图片处理部分上篇文章已经获取了wx的 ...
elementui el-from 怎样显示图片_vue2.0使用weui.js的uploader组件上传图片(兼容移动端)...
本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 最近在使用 vue2.0开 ...
使用WEUI uploader上传图片
使用WEUI uploader上传图片,博主费了很大的劲总算找到完整的了,并且带后台接收代码,有需要的朋友拿去吧,亲测可用! 一.html代码 <link rel="styleshee ...
微信公众号开发使用weui上传图片
先说一下遇到的问题, 1.刚开始在开发阶段直接前台用ajax调接口上传图片没问题,可是到了正式服务器部署时,问题出现了.好像是无法跨域(可能是服务器域名化了的原因),但是后台接口方法中已经添加了允许跨 ...
部分图片上传图片报跨域错误Access to XMLHttpRequest at ‘http://localhost:8000/v1/avatar/update‘ from origin ‘http:
背景给服务器上传图片文件时发生跨域报错,奇怪的是部分图片上传时才会出现这种问题,而且后端已经配置了跨域处理,不应该是跨越错误,我用的后端是nodejs写的原因出现这种问情况是因为部分图片太大导致 ...
上传图片，多图上传，预览功能，js原生无依赖
最近很好奇前端的文件上传功能,因为公司要求做一个支持图片预览的图片上传插件,所以自己搜了很多相关的插件,虽然功能很多,但有些地方不能根据公司的想法去修改,而且需要依赖jQuery或Bootstrap库 ...

Weui 结合 xmlHttpRequest 上传图片

Weui 结合 xmlHttpRequest 上传图片相关推荐

最新文章

热门文章