文件上传逻辑

最新推荐文章于 2024-05-14 08:07:26 发布

weixin_42537824

最新推荐文章于 2024-05-14 08:07:26 发布

阅读量383

点赞数

文章标签：文件上传

本文链接：https://blog.csdn.net/weixin_42537824/article/details/101517893

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	</head>
	<body>
		<div style="margin-top: 15px;">
            <div class="clearfix">
                <label class="fl" style="height:24px;line-height:24px">上传</label>
                <div class="fl"><input type="file"  multiple="multiple" id="file"></div>
            </div>
            <div id="fee" style="padding-left: 26%;box-sizing: border-box;">
                <?php foreach($cost_detail as $list):?>
                <?php if($list['file_name']):?>
                    <span>
                        <a href="" class="link_btn" download >{$list['file_name']}</a>
                        <span style="margin-left: 5px; cursor: pointer;" class="del" data-index="{$list['file_name']}" data-id="{$list['id']}">X</span>
                    </span>
                <?php endif?>
                <?php endforeach?>
            </div>
		</div>
		<button id="btn">提交</button>
	</body>
	<script type="text/javascript">
		$(function(){
				//上传图片
				var files = [];
				$("#file").on('change',function(event){
					Array.prototype.push.apply(files, this.files);
					console.log(files);
					previewFile(event);
				})
				//删除预览图
				$('#fee').on('click', '.del', function (){
					//  alert(2)
						var index = $(this).index('.del');
						$(this).parent().remove();
						files.splice(index, 1);
				});
				//提交给后台
				$("#btn").click(function(){
					var form = new FormData();
					for(var i=0;i<files.length;i++){
						form.append('file[]',files[i]);
					}
					//ajax 把form整体提交过去
				})
				
		})
		//本地上传的时候预览上传的文件
		function previewFile(event){
			var file = event.target.files;
			for(var i=0;i<file.length;i++){
				var reader =  new FileReader;
				reader.error =  function(e){
					alert("读取异常");
				}
				(function(i){
					reader.onload = function(e){
						var span = $('<span class="imagebox1"></span>').css({marginRight:'10px'});
						var a = '<a target = "_blank" class = "link_btn" href="'+e.target.result+'">'+file[i].name+'</a>';
						var del = '<span style="margin-left:5px;cursor:pointer;" class="del">X</span>'
						span.html(a + del);
						var warp = $(event.target).parent().parent().next();
						wrap.append(span);
					}
				}(i))
				reader.readAsDataURL(file[i]);
			}
		}
		
	</script>
</html>

weixin_42537824

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文件上传逻辑

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <scrip...
复制链接

扫一扫