Weui 結合 xmlHttpRequest 上傳圖片

時間 2019-11-30

標籤 weui 結合 xmlhttprequest 上傳圖片简体版

原文原文鏈接

1、html部分javascript

<!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">css

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

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

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

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

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

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

</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>

<header class='demos-header'>
<h1 class="demos-title">問答</h1>
</header>
<form class='wdForm' action='{:url("wenda_handle")}'>
<div class="weui-cells__title"><font color='#FF4544'>*</font>標題</div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<input class="weui-input" type="text" name='title' placeholder="請輸入標題">
</div>
</div>
</div>app

<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>

2、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);
}