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

2024-05-10 09:18

本文主要是介绍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又拍云插件第三版,支持多文件上传的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/976029

相关文章

Spring MVC 图片上传

引入需要的包 <dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-

Maven(插件配置和生命周期的绑定)

1.这篇文章很好,介绍的maven插件的。 2.maven的source插件为例,可以把源代码打成包。 Goals Overview就可以查看该插件下面所有的目标。 这里我们要使用的是source:jar-no-fork。 3.查看source插件的example,然后配置到riil-collect.xml中。  <build>   <plugins>    <pl

jenkins 插件执行shell命令时,提示“Command not found”处理方法

首先提示找不到“Command not found,可能我们第一反应是查看目标机器是否已支持该命令,不过如果相信能找到这里来的朋友估计遇到的跟我一样,其实目标机器是没有问题的通过一些远程工具执行shell命令是可以执行。奇怪的就是通过jenkinsSSH插件无法执行,经一番折腾各种搜索发现是jenkins没有加载/etc/profile导致。 【解决办法】: 需要在jenkins调用shell脚

Jenkins 插件 地址证书报错问题解决思路

问题提示摘要: SunCertPathBuilderException: unable to find valid certification path to requested target...... 网上很多的解决方式是更新站点的地址,我这里修改了一个日本的地址(清华镜像也好),其实发现是解决不了上述的报错问题的,其实,最终拉去插件的时候,会提示证书的问题,几经周折找到了其中一遍博文

Golang支持平滑升级的HTTP服务

前段时间用Golang在做一个HTTP的接口,因编译型语言的特性,修改了代码需要重新编译可执行文件,关闭正在运行的老程序,并启动新程序。对于访问量较大的面向用户的产品,关闭、重启的过程中势必会出现无法访问的情况,从而影响用户体验。 使用Golang的系统包开发HTTP服务,是无法支持平滑升级(优雅重启)的,本文将探讨如何解决该问题。 一、平滑升级(优雅重启)的一般思路 一般情况下,要实现平滑

在SSH的基础上使用jquery.uploadify.js上传文件

在SSH框架的基础上,使用jquery.uploadify.js实现文件的上传,之前搞了好几天,都上传不了, 在Action那边File接收到的总是为null, 为了这个还上网搜了好多相关的信息,但都不行,最后还是搜到一篇文章帮助到我了,希望能帮助到为之困扰的人。 jsp页面的关键代码: <link rel="stylesheet" type="text/css" href="${page

eclipse安装subversion(SVN)版本控制插件

陈科肇 查看插件更新站点 网址:http://subclipse.tigris.org/servlets/ProjectProcess?pageID=p4wYuA 网站截图: 根据自己的eclipse版本,选择需要的更新站点. 使用eclipse集成subservion插件 Help > Install New Software…> 等待下载安装插件…

Weex入门教程之2,Android Studio安装Weex插件

插件位置及描述 https://plugins.jetbrains.com/idea/plugin/8460-weex 貌似对windows还不是很支持,先放着吧。 安装 插件功能 先预览下都有什么功能 安装完成Weex插件后,如果在main toolbar找不到这些功能图标,那么就需要手动添加到main toolbar 添加到main toolbar 红框内就是

sqlite不支持中文排序,采用java排序

方式一 不支持含有重复字段进行排序 /*** sqlite不支持中文排序,改用java排序* 根据指定的对象属性字段,排序对象集合,顺序* @param list* @param field* @return*/public static List sortListByField(List<?> list,String field){List temp = new ArrayList(

一款支持同一个屏幕界面同时播放多个视频的视频播放软件

GridPlayer 是一款基于 VLC 的免费开源跨平台多视频同步播放工具,支持在一块屏幕上同时播放多个视频。其主要功能包括: 多视频播放:用户可以在一个窗口中同时播放任意数量的视频,数量仅受硬件性能限制。支持多种格式和流媒体:GridPlayer 支持所有由 VLC 支持的视频格式以及流媒体 URL(如 m3u8 链接)。自定义网格布局:用户可以配置播放器的网格布局,以适应不同的观看需求。硬