标签:样式 position button rev play min font http idt
HTML代码:
<div> <div> <input type="file" style="display:none" id="files" multiple="multiple" accept="image/*"/> <input type="button" value="点击上传" id="btnfile" /> <input type="button" value="确认提交" id="btnupload" /> </div> <div class="imgpreview"> </div> </div>
然后添加点样式:
<style> #btnfile, #btnupload { width: 120px; height: 30px; background: #2ECC71; text-align: center; margin: 10px auto; border: none; color: #f5f4f4; border-radius: 15px; outline: none; font-size: 14px; } .imgpreview { width: 100%; height: auto; display: flex; flex-wrap: wrap; } .delete { display: none; position: absolute; cursor: pointer; z-index: 999; top: 0px; right:1px; } .imgpreview > div { width: 24%; height: auto; margin-left: 5px; position: relative; } .imgpreview > div > img { width: 100%; } .imgpreview > div:hover .delete { display: block; } .imgpreview > div :hover { opacity: 0.4; color: #fff; background: rgba(0,0,0,0.5); position: relative; } </style>
js代码:
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> $(function () { var formdata = new FormData(); $("#btnfile").click(function () { $("#files").trigger("click"); }); $("#files").change(function (e) { var allfile = e.target.files; var name = ‘‘, div = ‘‘, image = ‘‘; for (var i = 0; i < allfile.length; i++) { var first = allfile[i]; var reader = new FileReader(); reader.readAsDataURL(first); reader.onloadend = (function (i) { var div = $("<div><span class=\"delete\">X</span></div>"); var img = $("<img/>"); img.attr("src", this.result); div.append(img); $(".imgpreview").append(div); formdata.append("uploadfile", first) }); }; }) $("#btnupload").click(function () { //formdata.append("text", "1"); //formdata.append("text", "2"); $.ajax({ url: "program/action.aspx?r=" + new Date(), type: "POST", data: formdata, cache: false, //不设置缓存 processData: false, // 不处理数据 contentType: false // 不设置内容类型 }); }); }); </script>
后台处理:
public void uploadimg() { //string text = Request.Form["text"]; System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; for (int i = 0; i < files.AllKeys.Count(); i++) { if (files.AllKeys[i] == "uploadfile") { if (files[i].FileName.Length > 0) { System.Web.HttpPostedFile postedfile = files[i]; string filePath = ""; var ext = Path.GetExtension(postedfile.FileName); var fileName = DateTime.Now.Ticks.ToString() + ext; // 组合文件存储的相对路径 filePath = "/mytest/upload/" + fileName; // 将相对路径转换成物理路径 var path = Server.MapPath(filePath); postedfile.SaveAs(path); } } } }
标签:样式 position button rev play min font http idt
原文地址:https://www.cnblogs.com/smileZeng/p/8629421.html