uploadify上传多个图片

最新推荐文章于 2021-02-12 21:57:10 发布

而我想成为一个有趣的妞

最新推荐文章于 2021-02-12 21:57:10 发布

阅读量549

点赞数

文章标签： uploadify 上传图片

本文链接：https://blog.csdn.net/weixin_41728561/article/details/80196704

版权

2018.5 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

add.html

<div class="row cl">
					<label class="form form-label col-xs-4 col-sm-2">大图-多个：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<div id="queue"></div>
						<input id="file_upload_bigpicture" name="file_upload_bigpicture" type="file" multiple="true">
						<a href="javascript:$('#file_upload_bigpicture').uploadify('upload', '*')">开始</a>
						<a href="javascript:$('#file_upload_bigpicture').uploadify('cancel', '*')">取消</a>
						<div class="preview">
							<ul id="previewImgs"></ul>
						</div>
						<textarea name="file_many" style="display: none;" id="saveurl"></textarea>
						<!--    -->
					</div>
				</div>

edit.html

<div class="row cl">
					<label class="form form-label col-xs-4 col-sm-2">大图-多个：</label>
					<div class="formControls col-xs-8 col-sm-9">
						
						<div id="queue"></div>
						<input id="file_upload_bigpicture" name="file_upload_bigpicture" type="file" multiple="true">
						<a href="javascript:$('#file_upload_bigpicture').uploadify('upload', '*')">开始</a>
						<a href="javascript:$('#file_upload_bigpicture').uploadify('cancel', '*')">取消</a>
						<div class="preview">
							<ul id="previewImgs">
							{if condition="$file_many_null eq 0"}
								{volist name="file_many" id="vo"}
							<li><img  src="{$vo}" alt="预览图片" width="250"  height="150" name="image_del"><br /><a style="display:block ;text-align: center;" class="btn btn-default" attr="{$vo}" οnclick=goDel(this,"'+obj.savepath+'")>删除</a></li>
							{/volist}
							{else}
							<label>没有图片</label>
							{/if}
							</ul>
						</div>
						<textarea name="file_many" style="display: none;" id="saveurl" >{$file_many_saveurl}</textarea>
						<!--  style="display: none;" -->
					</div>
				</div>

image.js

$('#file_upload_bigpicture').uploadify({
                'auto':false, //是否自动开始上传
                'debug' : false,// 是否开启浏览器调试
                'buttonText' : '上传图片', // 上传按钮文字
                'fileTypeExts':'*.jpg;*.gif;*.bmp;*.png;*.jpeg', //允许的图片类型
                'fileTypeDesc'    :'Image file',
                'fileObjName'     :'file',
                // 'fileSizeLimit' : '2MB', // 允许的单张图片的自大值
                'multi' : true, //是否允许多张图片一起上传
                // 'uploadLimit':4,
                'removeCompleted':false,
                'swf'      : SCOPE.uploadify_swf,
                'uploader' : SCOPE.image_upload,
                'onUploadSuccess' : function(file,data,response){
                    if (response) {
                    var obj = JSON.parse(data);
                    var imgstr = '<li><img src="'+obj.data+'" alt="预览图片" width="250" height="150"><br /><a style="display:block ;text-align: center;" class="btn btn-default" attr="'+obj.data+'" οnclick=goDel(this,"'+obj.savepath+'")>删除</a></li>';
                    $("#previewImgs").append(imgstr);
                    $("#saveurl").append('|'+obj.data);
                    }
                }
            });
 
function goDel(objdom,src){
        // 存放上传图片url的地方
        var textarea = document.getElementById('saveurl').value;
        textarea = '|'+textarea;
        console.log(textarea);
        // 需要删除的图片
        var del_img = $(objdom).attr('attr');
        if(textarea.indexOf(del_img) > 0 ){
            textarea= textarea.replace('|'+del_img,"");
            if(textarea.charAt(0)=='|'){
                textarea= textarea.replace(textarea.charAt(0),"");
               
            }
            document.getElementById("saveurl").value=textarea;
        }
        $(objdom).parent().remove();
         console.log(textarea);
        return textarea;
    }

php:save方法里面直接读数据就可以，所以这里只写edit方法

public function edit(){
		$id = input('get.id');
		$extension = model('Extensions')->get($id);
		$where = ['wig_category'=>'extensions','status'=>1];
		$category= model('Category')->getTableByNameAndCategory($where);
		 if(substr($extension['file_many'],0,1) == '|'){
		 	$extension['file_many'] = substr_replace($extension['file_many'],"",0,1);
		 }
		$file_many = explode('|', $extension['file_many']);
		if(empty($extension['file_many'])){
			$file_many_null = true;
		}else{
			$file_many_null = false;
		}
		return $this->fetch('',[
			'extension'=>$extension,
			'category'=>$category,
			'file_many'=>$file_many,
			'file_many_saveurl'=>$extension['file_many'],
			'file_many_null'=>$file_many_null,
		]);
	}

注：记得下载uploadify文件 https://github.com/SmallLeaves/Uploadify.git