多张图片上传js

最新推荐文章于 2023-11-23 17:57:49 发布
Mr_YDK
最新推荐文章于 2023-11-23 17:57:49 发布
阅读量676
点赞数
CC 4.0 BY-SA版权
分类专栏：文件图片上传文章标签：多张图片上传
本文链接：https://blog.youkuaiyun.com/ydk888888/article/details/77580910
文件图片上传专栏收录该内容
2 篇文章
订阅专栏
1.WEB项目：
前端页面及js:
<body>
    <div class="mt10 pb30">
        <div class="col-xs-2">
            <span class="" >内容</span>
        </div>
        <div class="col-xs-10">
            <div id="contentShow">
            </div>
        </div>
    </div>


<div class="mt20 pb30">
    <div class="col-xs-7 col-xs-offset-3" >
        <button class="btn btn-primary button2 ml-20" id="submit">保存</button>
        <button class="btn btn-default button2 ml10" id="cancel">取消</button>
    </div>
</div>
</body>
<script>
    var E = window.wangEditor
    var editor = new E('#contentShow')
    // 普通的自定义菜单
    editor.customConfig.menus = ['image'];
    //最多选择一张图片
    editor.customConfig.uploadImgMaxLength = 1;
    // 上传图片
    editor.customConfig.uploadImgServer = config.url+"/api/basis/file/fileUpload.json";
    editor.create();
    //渲染文档类型
    function getArticleType(){
        $("#typeSelect").empty();
        var opt="<option  value=''>请选择-类型</option>";
        var param = {
            parentCode:"ARTICLE_TYPE"
        };
        $.doAjaxPost("dictionaryItem/queryCommonDictionaryItem.json", param, function(data) {
            var dictionaryList = data.data.dictionaryItemCommon;

            for (var i = 0; i < dictionaryList.length; i++) {
                opt+="<option value='"+dictionaryList[i].code+"'>"+dictionaryList[i].name+"</option>";
            }
            $("#typeSelect").append(opt);
        });
    }
    getArticleType();

    $(function() {
        $("#picUrl").change(function() {
            uploadPic();
        });

        function uploadPic() {
            var formData = new FormData($("#ajaxForm")[0]);
            $.ajax({
                type: 'POST',
                url:  config.url+"/api/basis/file/fileUpload.json",
                data: formData,
                dataType: 'JSON',
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    var json = {
                        filePath : data.data.filePath,
                        uploadTime : data.data.uploadTime
                    }
                    $("#fileSrc").val(json.filePath);
                    $("#avatarImg").attr("src",json.filePath);
                }
            });
        }
        $("#submit").on('click', function() {

            //标题
            var title=$("#title").val();
            if(!title){
                alert("请输入标题");
                return;
            }
            //类型
            var type=$("#typeSelect").val();
            if(type=='0' || type==''){
                alert("请选择文章类型");
                return;
            }
           //封面图片
            var picUrl= $("#fileSrc").val();
            //简介
            var content= editor.txt.html();
            content = content.replace(/ /gm," ");
            content = content.replace(/</gm,"<");
            content = content.replace(/>/gm,">");
            content = content.replace(/"<!--StartFragment-->"/gm,"");
            content = content.replace(/%/gm,"~~~~");
            if(!content){
                alert("请输入内容");
                return;
            }
            if(content.indexOf("<p") > -1 || content.indexOf("<s") > -1 || content.indexOf("<t") > -1
                || content.indexOf("<a") > -1 || content.indexOf("<c") > -1 || content.indexOf("<h") > -1
                || content.indexOf("<u") > -1 || content.indexOf("<l") > -1 || content.indexOf("<f") > -1
                || content.indexOf("<?") > -1 || content.indexOf("<o") > -1
                ||  content.indexOf("<P") > -1 || content.indexOf("<S") > -1 || content.indexOf("<T") > -1
                || content.indexOf("<A") > -1 || content.indexOf("<C") > -1 || content.indexOf("<H") > -1
                || content.indexOf("<U") > -1 || content.indexOf("<L") > -1 || content.indexOf("<F") > -1
                || content.indexOf("<!") > -1 || content.indexOf("<O") > -1 ){
                alert("只支持div,br,img标签。");
                return;
            }
            /*if(!isJSON(content)){
                alert("请输入正确的json格式");
                return;
            }*/
            //提交
            var prams = {
                title:title,
                type:type,
                picUrl:picUrl,
                content:content
            };

            $.doAjaxPost('article/addArticle.json', prams, function(data) {
                doajaxsuccess("添加成功", 2)
            });

        });
    });
    $("#cancel").on('click',function(){
        parent.closeIframe();
    });
    //判断是否是json数据
    function isJSON(str) {
        if (typeof str == 'string') {
            try {
                JSON.parse(str);
                return true;
            } catch(e) {
                console.log(e);
                return false;
            }
        }
    }
</script>
</html>