FastAdmin又拍云插件第三版，支持多文件上传

本文主要是介绍FastAdmin又拍云插件第三版，支持多文件上传，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

JS代码

/*
又拍云插件--Power by Andiff  weixin:17191079694 QQ:165607361*/
(function (factory) {if (typeof define === 'function' && define.amd) {// AMD. Register as anonymous module.define(['jquery'], factory);} else if (typeof exports === 'object') {// Node / CommonJSfactory(require('jquery'));} else {// Browser globals.factory(jQuery);}
})(function ($) {'use strict';//常量var UPYUNURL = 'https://v0.api.upyun.com/andiffnet1';   //这里是又拍云请求地址//上传接口地址var BUCKET = 'andiffnet1';//Bucketvar FORMAPI = 'R1aPnbtDDGDwt+3xp+RGnsbFVq1RQ=';//formapivar SAVEPATH = 'ren';//保存文件的文件夹var URL = '/api/upyunupload/rentoupyun?savepath=';  //这里是控制器请求地址var ONLINEURL = 'https://qd.andiff.net/'; //这里换成你的又拍云地址var upyun = {//类似朋友圈上传多张图片uploadPicsByAjax:function(index,ul,dir){$.getJSON(URL+dir, function (data) {var uploadData = new FormData();uploadData.append('file', $('#files'+index)[0].files[0]);uploadData.append('policy', data.policy);uploadData.append('authorization', data.authorization);$.ajax({url: UPYUNURL,type: 'POST',data: uploadData,cache: false,processData: false,contentType: false,}).done(function(data, textStatus) {//alert(JSON.stringify(data));var body = jQuery.parseJSON(data);var img = '<img width="100%" src="'+ONLINEURL+body.url+'" />';img = img + '<img class="imgcommon" src="/images/cha.png" />';img = img + '<input type="hidden" name="row[picurl][]" value="'+body.url+'" />';img = img + '<span><input class="form-control" name="row[listorder][]" type="text" value="1" placeholder="顺序" /></span>';$("#"+ul+" li").eq(index).html(img);}).fail(function(res, textStatus, error) {try {var body = JSON.parse(res.responseText);alert('error: ' + body.message);} catch(e) {console.error(e);}});});},//普通的上传图片文件uploadByAjax: function (file1,show1,dir) {var filename = '';var fileextname = '';if(typeof($('#'+file1)[0].files[0].name)!='undefined'){filename = $('#'+file1)[0].files[0].name;fileextname = filename.split('.')[1];}var multiple = $('#'+file1).data('multiple');var arry = $('#'+file1).attr("accept").split(',');var inarray = $.inArray('.'+fileextname, arry);if(inarray==-1){alert('请上传'+arry.join()+'文件');return;}$.getJSON(URL+dir+'&ext='+fileextname, function (data) {var uploadData = new FormData();uploadData.append('file', $('#'+file1)[0].files[0]);uploadData.append('policy', data.policy);uploadData.append('authorization', data.authorization);$.ajax({url: UPYUNURL,type: 'POST',data: uploadData,cache: false,processData: false,contentType: false,}).done(function(data, textStatus) {var body = jQuery.parseJSON(data);if(multiple==true){var s = $("#"+show1).val();if(s==''){$("#"+show1).val(body.url);}else{$("#"+show1).val(s+','+body.url);}                        }else{$("#"+show1).val(body.url);}                   if(typeof($('#'+file1).attr("previewid"))!='undefined'){var preid = $('#'+file1).attr("previewid");var str = '';if(multiple==true){//多选str = str + $("#"+preid).html();}                       str = str + '<li class="col-xs-3">';str = str + '<a href="'+ONLINEURL+body.url+'" data-url="'+ONLINEURL+body.url+'" target="_blank" class="thumbnail">';str = str + '<img src="'+ONLINEURL+body.url+'" class="img-responsive" /></a>';str = str + '<a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>';str = str + '</li>';$("#"+preid).html(str);}$(document).on("click", "#" + preid + " .btn-trash", function () {var url = $(this).prev().attr('href').replace(ONLINEURL,"");                        var arry = $("#"+show1).val().split(',');var ss = '';for (var i = arry.length - 1; i >= 0; i--) {if(arry[i]!=url){ss = ss + arry[i] + ',';}}$("#"+show1).val(ss.substr(0,ss.length-1));$(this).closest("li").remove();});}).fail(function(res, textStatus, error) {try {var body = JSON.parse(res.responseText);alert('error: ' + body.message);} catch(e) {console.error(e);}});});},//summernote文字编辑器里面上传图片uploadForSummerNote: function (file1,show1) {$.getJSON(URL+'summernote', function (data) {var uploadData = new FormData();uploadData.append("file", file1);uploadData.append('policy', data.policy);uploadData.append('authorization', data.authorization);$.ajax({url: UPYUNURL,type: 'POST',data: uploadData,cache: false,processData: false,contentType: false,}).done(function(data, textStatus) {var body = jQuery.parseJSON(data);$("#"+show1).summernote('insertImage', ONLINEURL+body.url, 'image name');}).fail(function(res, textStatus, error) {try {var body = JSON.parse(res.responseText);alert('error: ' + body.message);} catch(e) {console.error(e);}});});},};return upyun;
});

HTML代码：

<div class="col-xs-12 col-sm-8"><div class="input-group"><input id="c-cdnimg" class="form-control" name="row[cdnimg]" type="text" value="" /><div class="input-group-addon no-border no-padding"><span><button type="button" id="plupload-imagecdnimg" class="btn btn-danger" data-input-id="c-cdnimg"><i class="fa fa-upload"></i>上传</button><div class="moxie-shim-html5"><input id="upyun_uploadcdnimg" class="upyun_upload" type="file" accept=".gif,.jpg,.jpeg,.tiff" tabindex="-1" previewid="p-cdnimg"  data-multiple="true"/></div></span></div><span class="msg-box n-right"></span></div><ul class="row list-inline plupload-preview" id="p-cdnimg"></ul> 
</div>

data-multiple="true" ， 代表一次上传多张，其他代表一次上传一张。

调用代码：

$("#upyun_uploadcdnimg").bind('change',function(){UpYun.uploadByAjax('upyun_uploadcdnimg','c-cdnimg','andiffnet/test');
});

 

 

这篇关于FastAdmin又拍云插件第三版，支持多文件上传的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---