admin 管理员组

文章数量: 1086936

HTML图片上传服务器

图片上传服务器

html

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>#image-preview {border: 1px solid #ccc;width: 100%;height: 100%;max-width: 200px;max-height: 200px;background-size: contain;background-repeat: no-repeat;background-position: center center;}
</style>
<script type="text/javascript">/*function upoloadImg() {var fileImage1 = document.getElementById("fileImage1");$.ajax({url: '',method: 'POST',data: { fileImage1: fileImage1 },processData: false,contentType:false,success: function (data) {if (data == "ok") {confirm("上传成功");} else {confirm("上传失败");}}})}*/let fileInput = document.getElementById('fileImage1');let info = document.getElementById('info');let preview = document.getElementById('image-preview');// 监听change事件:fileInput.addEventListener('change', function() {// 清除背景图片:preview.style.backgroundImage = '';if (!fileInput.value) {info.innerHTML = '没有选择文件';return;}let file = fileInput.files[0];let size = file.size;if (size >= 1 * 1024 * 1024) {alert('文件大小超出限制');info.innerHTML = '文件大小超出限制';return false;}if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {alert('不是有效的图片文件!');return;}// 读取文件:let reader = new FileReader();reader.onload = function(e) {let data = e.target.result;console.log(preview, 'a标签')preview.src = data};// 以DataURL的形式读取文件:reader.readAsDataURL(file);});function save() {var fileImage1 = document.getElementById("fileImage1");$("#file_upload").form("submit", {url: '',//method: 'POST',//processData: false,//contentType: false,success: function (data) {if (data == "上传成功") {confirm("上传成功");resetform();} else {confirm("上传失败");}}})}function resetform() {$("#file_upload").form('clear');}
</script><form method="post" enctype="multipart/form-data" id="file_upload"><h3>图片预览</h3><img id="image-preview" style="width:600px;height:300px"><p><input type="file" id="fileImage1" name="fileImage1" accept="image/gif, image/jpeg, image/png, image/jpg"><input type="button" value="上传图片" onclick="save()" /></p><p id="info"></p>
</form>

.Net Framework

 public void UploadImages(HttpContext context){string result = "";HttpPostedFile postfile = HttpContext.Current.Request.Files["fileImage1"];//HttpPostedFile提供对客户端已上载的单独文件的访问if (postfile != null){//读取kgtimages下的文件名//如果存在该文件名，则先删除该文件再进行处理---经验证  不进行处理  相同名称会直接替换/*string path =  System.Web.HttpContext.Current.Server.MapPath("../kgtimages/");string[] files = Directory.GetFiles(path);if (files.Length > 0){foreach (string file in files){string filePath = path  + postfile.FileName;if (file.Equals(filePath)){Directory.Delete(filePath);}}}*/string savepath = context.Server.MapPath("../kgtimages/" + postfile.FileName);//路径,相对于服务器当前的路径postfile.SaveAs(savepath);//保存context.Response.Write("上传成功");}else{context.Response.Write("上传失败");}}

本文标签： HTML图片上传服务器

版权声明：本文标题：HTML图片上传服务器 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687815900a144884.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。