在Fastadmin里面做一个模仿朋友圈上传图片的效果（pc测试通过）

最新推荐文章于 2024-09-19 11:13:26 发布

范多伦

最新推荐文章于 2024-09-19 11:13:26 发布

阅读量2.2k

点赞数 1

分类专栏： fastadmin 文章标签： fastadmin

本文链接：https://blog.csdn.net/u010261924/article/details/80824779

版权

fastadmin 专栏收录该内容

58 篇文章 3 订阅

订阅专栏

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 / CommonJS
        factory(require('jquery'));
    } else {
        // Browser globals.
        factory(jQuery);
    }
})(function ($) {
	'use strict';
	//常量
    var UPYUNURL = 'http://v0.api.upyun.com/andiffnet1';
    //上传接口地址
    var BUCKET = 'andiffnet1';
    //Bucket
    var FORMAPI = 'R1PnbtDDGDw+3xp+RGnsbFVq1RQ=';
    //formapi
    var SAVEPATH = 'ren';
    //保存文件的文件夹
    var URL = '/addons/upyun/index/rentoupyun.html?savepath=';

    var upyun = {
        //类似朋友圈上传多张图片
        uploadPicsByAjax:function(index,ul,dir){
            var filename = '';var fileextname = '';
            if(typeof($('#files'+index)[0].files[0].name)!='undefined'){
                filename = $('#files'+index)[0].files[0].name;
                fileextname = filename.split('.')[1];
            }
            $.getJSON(URL+dir+'&ext='+fileextname, 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="https://qd.andiff.net/'+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 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) {
                    //alert(JSON.stringify(data));
                    var body = jQuery.parseJSON(data);
                    $("#"+show1).val(body.url);
                    if(typeof($('#'+file1).attr("previewid"))!='undefined'){
                        var preid = $('#'+file1).attr("previewid");
                        var str = '<li class="col-xs-3">';
                        str = str + '<a href="http://qd.andiff.net/'+body.url+'" data-url="http://qd.andiff.net/'+body.url+'" target="_blank" class="thumbnail">';
                        str = str + '<img src="http://qd.andiff.net/'+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);
                    }
                }).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,
                    //url: '/index/rentoupyun',
                    type: 'POST',
                    data: uploadData,
                    cache: false,
                    processData: false,
                    contentType: false,
                }).done(function(data, textStatus) {
                    var body = jQuery.parseJSON(data);
                    $("#"+show1).summernote('insertImage', 'https://qd.andiff.net/'+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 $.inArray(type, this.dems) !== -1;
        },
    };
    return upyun;
});

css代码：

.input-group-addon span{ position:relative; }
.cheng_ul_pics{width:100%;}
.cheng_ul_pics li{
	width:27%;border:1px solid #ddd;margin:0 5px 10px; position:relative;
    background-image: url(http://qd.andiff.net/script/plupload/logo.png); background-size:100%;
}

.cheng_ul_pics li{width:30%;float: left;}
.cheng_ul_pics li input[type=file]{
	font-size: 999px;top: 0px;left: 0px;
    opacity: 0;position: absolute;
    width: 80%;height: 80%;
}
.cheng_ul_pics li img{width:100%;height:100%;}
.cheng_ul_pics li img.imgcommon{position:absolute;right: 0;top:0;width:10%; height: 10%;cursor: pointer;}
 .cheng_ul_pics li span{width:50%;position: absolute;bottom:-25%;left: 25%;/**/display:block;}
.cheng_ul_pics li span input{/*width:90%; margin:0 auto;float: left;z-index: 9999;*/}
.moxie-shim-html5{position: absolute; top: 0px; left: 0px; width: 65px; height: 31px; overflow: hidden; z-index: 0;}
.upyun_upload{font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.clearfix{clear: both;}

HTML代码：

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <input type="hidden" id="c-productid" name="row[productid]" value="{$productid}" />
    <div class="form-group">
        <label for="c-picurl" class="control-label col-xs-12 col-sm-2">图片上传:</label>
        <div class="col-xs-12 col-sm-8">
            <ul id="cheng_ul_pics" class="cheng_ul_pics clearfix">
                <li>
                    <input type="file" name="files0" id="files0" />
                </li>
								<li>
                    <input type="file" name="files1" id="files1">
                </li>
								<li>
                    <input type="file" name="files2" id="files2" />
                </li>
								<li>
                    <input type="file" name="files3" id="files3">
                </li>
            </ul>
            <ul id="cheng_ul_pics" class="cheng_ul_pics clearfix">
            </ul>
        </div>
    </div>
		<div class="form-group">
				<p> </p>
		</div>
		<div class="form-group">
				<label class="control-label col-xs-12 col-sm-2"></label>
				<div class="col-xs-12 col-sm-8">
						<button type="submit" class="btn btn-success btn-embossed">确定</button>
						<button type="reset" class="btn btn-default btn-embossed">重置</button>
				</div>
		</div>
</form>