FileUpload控件上传图片并自动生成缩略图
jQueryFileUpload文件上传插件使用详解
jQueryFileUpload⽂件上传插件使⽤详解 jQuery File Upload 是⼀个Jquery⽂件上传组件,⽀持多⽂件上传、取消、删除,上传前缩略图预览、列表显⽰图⽚⼤⼩,⽀持上传进度条显⽰;⽀持各种动态语⾔开发的服务器端。
特点:拖放⽀持;上传进度条;图像预览;可定制和可扩展的;兼容任何服务器端应⽤平台(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.)。
使⽤⽅法:1. 需要加载的js⽂件:jquey-1.8.3.min.jsjquery-ui-widget.jsjquery.iframe-transport.jsjquery.fileupload.js2. html代码:<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>3. js代码:$(function () {$('#fileupload').fileupload({dataType: 'json',done: function (e, data) {$.each(data.result.files, function (index, file) {$('<p/>').text().appendTo(document.body);});}});}); 3.1 显⽰上传进度条: $('#fileupload').fileupload({ progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .bar').css( 'width', progress + '%' ); } }); 3.2 需要⼀个<div>容器⽤来显⽰进: <div id="progress"> <div class="bar" style="width: 0%;"></div> </div>4. API4.1 Initialization:在上传按钮上调⽤fileupload()⽅法;⽰例:$('#fileupload').fileupload();4.2 Options :1: url:请求发送的⽬标urlType: stringExample: '/path/to/upload/handler.json'2.Type: ⽂件上传HTTP请求⽅式,可以选择“POST”,“PUT”或者"PATCH",默认"POST"Type: stringExample: 'PUT'3. dataType:希望从服务器返回的数据类型,默认"json"Type: stringExample: 'json'4. autoUpload:默认情况下,只要⽤户点击了开始按钮被添加⾄组件的⽂件会⽴即上传。
推荐WordPress缩略图插件-设为特色图片
推荐WordPress缩略图插件-设为特色图片Flexible Upload这主要是一个wordpress图片上传增强辅助类插件。
提供更加灵活的上传方式,功能包括多文件上传,自动添加水印,自动改变裁切图片大小,为图片添加悬浮属性,Lightbox灯箱属性,自动生成缩略图等等。
Post Thumb RevisitedPost-Thumb Revisited 可以为文章自动创建和显示缩略图. 通过扫描文章中的图片,可以为每篇文章显示一个链接缩略图,可以在侧边栏显示最新文章或随机文章的图片列表。
Post Attached ImagePost Attached Image可以添加一个图片缩略图提示到文章摘要或文章列表中,然后添加大图片到单篇文章中。
比如适合用来做产品目录。
Thumbnail Viewer一个可以为图片生成类似Lightbox效果的插件,强调的是体积小巧,运行快速。
Flickr Thumbnails Photostream这个wordpress插件可以让你非常方便添加Flickr帐户中的图片缩略图到文章中。
Regenerate Thumbnails一个可以批量改变图片尺寸的Wordpress插件。
EasyPermGalsEasyPermGals可以自动添加图片GALLERY到文章中,并且如果启用了Lightbox效果,会自动实现。
Get Image自动获取文章中的一张图片做为缩略图,可自定义图片尺寸。
非常实用的一个Wordpress插件。
Excerpt Image Link自动查找摘要中的<IMG>标记,如果找到,则显示一张缩略图,并添加该文章的永久链接。
Power Thumbnail简单实用的Wordpress缩略图插件。
Power Thumbnail 可以从已经存在的附件系统里生成缩图图. 提供两种缩略图方案:标准重定义图片尺寸或是高级缩放。
My thumbshot基于Mythumbshot服务的Wordpress插件,可以让用户以缩略图的形式预览外部链接.PhotoJAR: Post ThumbnailPost thumbnailer能够从GALLERY中显示一张文章缩略图,-附加功能包含一个JS图片浏览脚本。
上传图片生成等比例缩略图
上传图⽚⽣成等⽐例缩略图ImageThumbnail.csusing System;using System.IO;using System.Drawing;using System.Drawing.Imaging;public class ImageThumbnail{public Image ResourceImage;private int ImageWidth;private int ImageHeight;public string ErrorMessage;public ImageThumbnail(string ImageFileName){ResourceImage = Image.FromFile(ImageFileName);ErrorMessage = "";}public bool ThumbnailCallback(){return false;}// ⽅法1,按⼤⼩public bool ReducedImage(int Width, int Height, string targetFilePath){try{Image ReducedImage;Image.GetThumbnailImageAbort callb = new Image.GetThumbnailImageAbort(ThumbnailCallback); ReducedImage = ResourceImage.GetThumbnailImage(Width, Height, callb, IntPtr.Zero);ReducedImage.Save(@targetFilePath, ImageFormat.Jpeg);ReducedImage.Dispose();return true;}catch (Exception e){ErrorMessage = e.Message;return false;}}// ⽅法2,按百分⽐缩⼩60% Percent为0.6 targetFilePath为⽬标路径public bool ReducedImage(double Percent, string targetFilePath){try{Image ReducedImage;Image.GetThumbnailImageAbort callb = new Image.GetThumbnailImageAbort(ThumbnailCallback); ImageWidth = Convert.ToInt32(ResourceImage.Width * Percent);ImageHeight = (ResourceImage.Height)*ImageWidth/ ResourceImage.Width;//等⽐例缩放ReducedImage = ResourceImage.GetThumbnailImage(ImageWidth, ImageHeight, callb, IntPtr.Zero); ReducedImage.Save(@targetFilePath, ImageFormat.Jpeg);ReducedImage.Dispose();return true;}catch (Exception e){ErrorMessage = e.Message;return false;}}}后台代码:using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class _Default : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}protected void bt_upload_Click(object sender, EventArgs e){try{if (FileUpload1.PostedFile.FileName == ""){this.lb_info.Text = "请选择⽂件!";}else{string filepath = FileUpload1.PostedFile.FileName;string filename = filepath.Substring(stIndexOf("\\") + 1);string serverpath1 = Server.MapPath("images/") + filename;string serverpath2 = Server.MapPath("images/") + System.DateTime.Now.ToString("yyy-MM-dd-hh-mm-ss") + Session.SessionID + filename;FileUpload1.PostedFile.SaveAs(serverpath1);ImageThumbnail img = new ImageThumbnail(filepath);img.ReducedImage(0.4, serverpath2);//0.4表⽰缩⼩40%this.lb_info.Text = "上传成功!";}}catch (Exception error){this.lb_info.Text = "上传发⽣错误!原因:" + error.ToString();}}}类 ImageThumbnail确实存在问题,⽣成缩略图都⽆法删除图⽚,报资源被占⽤,通过⽹上查资料显⽰要Dispose();,可这个类没有这个⽅法,于是⾃⼰加了⼀个类public void DisImage(){ResourceImage.Dispose();}还有⽂中在使⽤类的时候也存在问题ImageThumbnail img = new ImageThumbnail(filepath);应该引⽤的是服务器上的地址,也就是ImageThumbnail img = new ImageThumbnail(serverpath1);以下是⾃⼰的使⽤代码string FileName = FilesSave(FileUpload1, "../AdFile/");protected static string FilesSave(FileUpload hifile, string RelativePath){string filepath = hifile.PostedFile.FileName;string GetFileName = "";if (filepath != string.Empty){//if (IsAllowedExtension(hifile) == true)//{Random rand = new Random();string filename = System.DateTime.Now.ToString("yyyMMddhhmmss") + System.Web.HttpContext.Current.Session.SessionID + filepath.Substring(stIndexOf("."));string serverpath1 = System.Web.HttpContext.Current.Server.MapPath(RelativePath) + filename;string serverpath2 = System.Web.HttpContext.Current.Server.MapPath(RelativePath) + "b_" + filename;hifile.PostedFile.SaveAs(serverpath1);ImageThumbnail img = new ImageThumbnail(serverpath1);img.ReducedImage(0.4, serverpath2); //0.4表⽰缩⼩40%img.DisImage();GetFileName = "b_" + filename;//}}return GetFileName;}。
elementupload实现图片批量上传与预览(自定义上传)
elementupload实现图⽚批量上传与预览(⾃定义上传)1、⾸先实现图⽚批量上传⾸先是html代码:http-request:覆盖默认的上传⾏为,可以⾃定义上传的实现<el-form enctype="multipart/form-data"><el-form-item label=""><el-upload multiple ref="upload" :action="action" :headers="{processData:false,contentType: false}" name="file" :data="filist" list-type="picture-card" :file-list="fileList" :limit="20" :auto-upload="false" :with-credentials="true":disabled="productMainDisable" :on-progress="handleUpload" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :http-request="uploadFile" :before-upload="beforeAvatarUpload"><i class="el-icon-plus"></i><div slot="tip" class="el-upload__tip"><p>1、上传图⽚只能是JPG/PNG 格式!</p><p>2、上传图⽚⼤⼩不能超过 5MB!</p></div><!-- :on-success="weiBo" --></el-upload><el-dialog:visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></el-form-item></el-form>在data⾥⾯定义:action: Domain + '/supplier/purchase/purchasedeliver/createPurchaseSignPod', //上传图⽚地址fileList: [],filist: {uuid: '' ,//需要附带的参数},formDate: "",isbandel:false, uploadFile(file) {this.formDate.append('file', file.file);},//上传签收单uploadpicture(uuid) {console.log(uuid)this.classifyWindow = true;this.filist.uuid = uuid;},//确认上传图⽚(⾃定义上传实现)submitUpload() {var that = thisif(that.formDate){that.isbandel = true;}console.log(that.formDate)that.formDate = new FormData()that.$refs.upload.submit();that.formDate.append('uuid', that.filist.uuid);$.ajax({url: Domain + "/supplier/purchase/purchasedeliver/createPurchaseSignPod",dataType: "json",method: "POST",contentType:false,processData:false,// contentType: "multipart/form-data",data: that.formDate,success: function (ret) {if (ret.retStatus == "1") {that.$message({type: "success",message: "上传成功!"});// 调⽤列表页刷新数据⽅法that.classifyWindow = false;that.isbandel = false;that.doSearch();that.canleUpload();}},});},//取消上传canleUpload() {this.classifyWindow = false;this.$refs.upload.clearFiles();},handleUpload: function (event, file, fileList) {this.productMainDisable = true;},//查看⼤图handlePictureCardPreview: function (file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},// ⽂件删除操作handleRemove: function (file, fileList) {this.fileList = [];this.fileList = fileList;},//上传图⽚之前判断图⽚⼤⼩及格式beforeAvatarUpload(file) {console.log(file)const isJPG = file.type === 'image/jpeg';const isPNG = file.type === 'image/png';const isLt2M = file.size / 1024 / 1024 / 1024 < 5;this.beforeUpload = false;if (!isJPG && !isPNG) {this.beforeUpload = true;this.$message.error('上传图⽚只能是 JPG/PNG 格式!');}if (!isLt2M) {this.beforeUpload = true;this.$message.error('上传图⽚⼤⼩不能超过 5MB!');}return (isJPG || isPNG) && isLt2M;},// 此处已注释,如果⽤这个⽅法上传就会有⼏张图⽚调⽤⼏次接⼝ weiBo: function (response, file, fileList) {if (response.retStatus != '1') {this.$message({type: 'error',message: response.retMessage,});} else {this.$message({type: "success",message: "上传成功!"})}2、实现图⽚预览<ul class="imgbox m-listtable f-pdg-20-t"><li v-for="(item,uuid) in srcList" :key="uuid"><el-imagestyle="width: 100%;":src="item.signPodPath":preview-src-list="new_arr"></el-image></li></ul>srcList: [], //⽤来循环的new_arr:[],//⽤来预览的数组//获取图⽚getImglist(){var that = this$.ajax({url: 'xxx',dataType: "json",method: "POST",data: {"uuid": utils.getQueryString("uuid")},success: function (ret) {if (ret.retStatus == "1") {that.srcList = JSON.parse(ret.retData) var arr = []let result = []that.srcList.forEach(item => { arr = item.signPodPaththat.new_arr.push(arr)})console.log(that.new_arr)}}})}。
blueimp jquery-file-upload 事例
blueimp jquery-file-upload 事例Blueimp jQuery-File-Upload示例前言:Blueimp jQuery-File-Upload是一款强大的文件上传插件,通过它,我们可以方便地在网页中实现文件上传功能。
本文将介绍一些实际应用中的Blueimp jQuery-File-Upload事例,展示其使用方法和效果。
一、注册和上传文件在使用Blueimp jQuery-File-Upload之前,我们首先需要在网页中引入该插件的相关文件。
一般来说,我们需要引入jQuery库、必要的CSS样式和脚本文件。
接着,在网页中创建一个容器,用于显示上传文件的进度和结果。
然后,我们需要给该容器绑定一个点击事件,当用户点击该容器时,会触发文件选择框,用户可以选择本地的文件进行上传。
二、添加文件队列和文件预览在文件选择完成后,Blueimp jQuery-File-Upload会自动将选择的文件添加到上传队列中,并在页面上展示文件的预览效果。
我们可以通过修改相关配置来自定义文件队列的展示样式,如设置默认的缩略图、添加删除按钮等。
通过这样的操作,用户可以清晰地看到自己选择的文件是否正确,提高了用户的操作体验。
三、指定上传目标和执行上传接下来,我们需要指定文件上传的目标路径或后台处理文件的URL 地址,并且处理上传按钮的点击事件。
当用户点击上传按钮时,Blueimp jQuery-File-Upload会自动将文件上传至指定的目标,并在页面上实时显示上传进度。
此时,我们可以通过监听相关的事件来获取上传进度,如上传开始前、进度更新和上传成功等。
四、处理上传结果在文件上传完成后,我们可以获取上传成功的文件信息,并可以对上传结果进行一些后续处理。
比如,可以将上传成功的文件信息保存到数据库中,方便以后的查阅或操作。
此外,我们也可以自定义上传失败的处理方式,如提示用户重新上传或显示上传错误信息等。
asp.netfileupload控件上传图片并预览图片
fileupload控件上传图⽚并预览图⽚本⽂为⼤家分享了fileupload控件实现上传图⽚后并进⾏预览图⽚的功能,并对web.config进⾏了配置,先看⼀下最终效果:页⾯代码:<form id="form1" runat="server"><div><asp:FileUpload ID="FileUpload1" runat="server" /><asp:Button ID="Button1" runat="server" Text="上传" Width="54px" OnClick="Button1_Click" /><asp:Label ID="Label1" runat="server" Text="" Style="color: Red"></asp:Label><asp:Image runat="server" ID="Image1" Style="z-index: 102; left: 20px; position: absolute;top: 49px" Width="73px" /></div></form>后台代码:using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;namespace Web.File{public partial class WebForm1 : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}#region ⽂件上传/// <summary>/// ⽂件上传/// </summary>protected void Button1_Click(object sender, EventArgs e){if (FileUpload1.FileName == ""){bel1.Text = "上传⽂件不能为空";return;}bool fileIsValid = false;//如果确认了上传⽂件,则判断⽂件类型是否符合要求if (this.FileUpload1.HasFile){//获取上传⽂件的后缀String fileExtension = System.IO.Path.GetExtension(this.FileUpload1.FileName).ToLower();String[] restrictExtension = { ".gif", ".jpg", ".bmp", ".png" };//判断⽂件类型是否符合要求for (int i = 0; i < restrictExtension.Length; i++){if (fileExtension == restrictExtension[i]){fileIsValid = true;}//如果⽂件类型符合要求,调⽤SaveAs⽅法实现上传,并显⽰相关信息if (fileIsValid == true){//上传⽂件是否⼤于10Mif (FileUpload1.PostedFile.ContentLength > (10 * 1024 * 1024)){bel1.Text = "上传⽂件过⼤";return;}try{this.Image1.ImageUrl = "~/File/" + FileUpload1.FileName;this.FileUpload1.SaveAs(Server.MapPath("~/File/") + FileUpload1.FileName);bel1.Text = "⽂件上传成功!";}catch{bel1.Text = "⽂件上传失败!";}finally{}}else{bel1.Text = "只能够上传后缀为.gif,.jpg,.bmp,.png的⽂件";}}}}#endregion}}Web.config 配置:<!--因为FileUpload 控件上传最⼤为4M,如果要上传更⼤⽂件,改下maxRequestLength的⼤⼩--><configuration><system.web><compilation debug="true" targetFramework="4.0" /><httpRuntime requestValidationMode="2.0" maxRequestLength="10485760" executionTimeout="3600" appRequestQueueLimit="10000"/></system.web></configuration>为⼤家附3个精彩的专题:亲,你可以在⾃⼰的项⽬中实现fileupload控件上传图⽚并进⾏预览图⽚的功能,这样⽹站更具有实⽤性,基本步骤就是这些,可能还有⼩编遗漏的地⽅,希望⼤家谅解。
JSP上传图片并生成缩略图
先看看三本例子使用了jspsmart组件进行上传,这里可以免费下载该组件下载解压后,将jar包复制到\WEB-INF\lib目录后重启服务器,jspsmart即可正常使用了1、uploadimage.jsp<%@ page contentType="text/html;charset=gb2312" language="java"import="java.io.*,java.awt.Image,java.awt.image.*,com.sun.image.codec.jpeg.*,java.sql.*,com.jspsmart.upload.*,java.util.*,cn.oof.database.*,cn.oof.house.*"%><%SmartUpload mySmartUpload =new SmartUpload();long file_size_max=4000000;String fileName2="",ext="",testvar="";String url="uploadfile/images/"; //应保证在根目录中有此目录的存在//初始化mySmartUpload.initialize(pageContext);//只允许上载此类文件try {mySmartUpload.setAllowedFilesList("jpg,gif");//上载文件mySmartUpload.upload();} catch (Exception e){%><SCRIPT language=javascript>alert("只允许上传.jpg和.gif类型图片文件");window.location=''''upfile.jsp'''';</script><%}try{com.jspsmart.upload.File myFile = mySmartUpload.getFiles().getFile(0);if (myFile.isMissing()){%><SCRIPT language=javascript>alert("请先选择要上传的文件");window.location=''''upfile.jsp'''';</script><%}else{//String myFileName=myFile.getFileName(); //取得上载的文件的文件名ext= myFile.getFileExt(); //取得后缀名int file_size=myFile.getSize(); //取得文件的大小String saveurl="";if(file_size<file_size_max){//更改文件名,取得当前上传时间的毫秒数值Calendar calendar = Calendar.getInstance();String filename = String.valueOf(calendar.getTimeInMillis());saveurl=request.getRealPath("/")+url;saveurl+=filename+"."+ext; //保存路径myFile.saveAs(saveurl,mySmartUpload.SAVE_PHYSICAL);//out.print(filename);//-----------------------上传完成,开始生成缩略图-------------------------java.io.File file = new java.io.File(saveurl); //读入刚才上传的文件String newurl=request.getRealPath("/")+url+filename+"_min."+ext; //新的缩略图保存地址Image src = javax.imageio.ImageIO.read(file); //构造Image对象float tagsize=200;int old_w=src.getWidth(null); //得到源图宽int old_h=src.getHeight(null);int new_w=0;int new_h=0; //得到源图长int tempsize;float tempdouble;if(old_w>old_h){tempdouble=old_w/tagsize;}else{tempdouble=old_h/tagsize;}new_w=Math.round(old_w/tempdouble);new_h=Math.round(old_h/tempdouble);//计算新图长宽BufferedImage tag = new BufferedImage(new_w,new_h,BufferedImage.TYPE_INT_RGB);tag.getGraphics().drawImage(src,0,0,new_w,new_h,null); //绘制缩小后的图FileOutputStream newimage=new FileOutputStream(newurl); //输出到文件流JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(newimage);encoder.encode(tag); //近JPEG编码newimage.close();}else{out.print("<SCRIPT language=''''javascript''''>");out.print("alert(''''上传文件大小不能超过"+(file_size_max/1000)+"K'''');");out.print("window.location=''''upfile.jsp;''''");out.print("</SCRIPT>");}}}catch (Exception e){e.toString();}%>2 upload.htm<html><head><title>请选择上传的图片</title></head><body><table border="0" align="center" cellpadding="0" cellspacing="0"><tr><td height="45" align="center" valign="middle"><form action="uploadimage.jsp" method="post" enctype="multipart/form-data" name="form1">请选择上传的图片<input type="file" name="file"><input type="submit" name="Submit" value="上传"></form></td></tr></table></body></html>二也谈一下文件上传在这里看到很多讨论文件上传的文章,觉得各有利敝,有些只限于上传文件,而不能同时取得文本字段值,尤其是上传多个文件比较少,现本人做这个上传文件的类最多可支持上传255个文件,同时可取得文本字段值,请各位高手指正.文件上传类:MoqUploadBean.javapackage net.jspcn.tool;import java.io.*;import java.util.*;import javax.servlet.*;import javax.servlet.http.*;/**** Title: 文件上传类* Description: 既能对文件进行上传,又能取得输入框的值,最多可同时上传255个文件 * Copyright: Copyright (c) 2002* Company: Tekson* @author 莫琼* @version 1.0*/public class UploadBean {private String[] sourceFile = new String[255]; //源文件名private String[] suffix = new String[255]; //文件后缀名private String canSuffix = ".gif.jpg.jpeg.png"; //可上传的文件后缀名private String objectPath = "c:/"; //目标文件目录private String[] objectFileName = new String[255]; //目标文件名private ServletInputStream sis = null; //输入流private String[] description = new String[255]; //描述状态private long size = 100 * 1024; //限制大小private int count = 0; //已传输文件数目private byte[] b = new byte[4096]; //字节流存放数组private boolean successful = true;private Hashtable fields = new Hashtable();public UploadBean() {}//设置上传文件的后缀名public void setSuffix(String canSuffix) {this.canSuffix = canSuffix;}//设置文件保存路径public void setObjectPath(String objectPath) {this.objectPath = objectPath;}//设置文件保存路径public void setSize(long maxSize) {this.size = maxSize;}//文件上传处理程序public void setSourceFile(HttpServletRequest request) throws IOException { sis = request.getInputStream();int a = 0;int k = 0;String s = "";while ( (a = sis.readLine(b, 0, b.length)) != -1) {s = new String(b, 0, a);if ( (k = s.indexOf("filename="")) != -1) {// 取得文件数据s = s.substring(k + 10);k = s.indexOf(""");s = s.substring(0, k);sourceFile[count] = s;k = stIndexOf(".");suffix[count] = s.substring(k + 1);if (canTransfer(count)) {transferFile(count);}++count;} else if ( (k = s.indexOf("name="")) != -1) {// 普通表单输入元素,获取输入元素名字String fieldName = s.substring(k+6, s.length()-3);sis.readLine(b, 0, b.length);StringBuffer fieldValue = new StringBuffer(b.length);while ( (a = sis.readLine(b, 0, b.length)) != -1) {s = new String(b, 0, a-2);if ( (b[0] == 45) && (b[1] == 45) && (b[2] == 45) && (b[3] == 45) && (b[4] == 45)) { break;} else {fieldValue.append(s);}}fields.put(fieldName, fieldValue.toString()); }if (!successful)break;}}//取得表单元素值public String getFieldValue(String fieldName) { if (fields == null || fieldName == null) {return null;}return (String) fields.get(fieldName);}//取得上传文件数public int getCount() {return count;}//取得目标路径public String getObjectPath() {return objectPath;}//取得源文件名public String[] getSourceFile() {return sourceFile;}//取得目标文件名public String[] getObjectFileName() {return objectFileName;}//取得上传状态描述public String[] getDescription() {return description;}//判断上传文件的类型private boolean canTransfer(int i) {suffix[i] = suffix[i].toLowerCase();//这个是用来传图片的,各位可以把后缀名改掉或者不要这个条件 if (sourceFile[i].equals("") || (!(canSuffix.indexOf("."+suffix[i])>=0))) { description[i] = "ERR: File suffix is wrong.";return false;}else {return true;}//上传文件转换private void transferFile(int i) {String x = Long.toString(new java.util.Date().getTime());try {objectFileName[i] = x + "." + suffix[i];FileOutputStream out = new FileOutputStream(objectPath + objectFileName[i]);int a = 0;int k = 0;long hastransfered = 0; //标示已经传输的字节数String s = "";while ( (a = sis.readLine(b, 0, b.length)) != -1) {s = new String(b, 0, a);if ( (k = s.indexOf("Content-Type:")) != -1) {break;}}sis.readLine(b, 0, b.length);while ( (a = sis.readLine(b, 0, b.length)) != -1) {s = new String(b, 0, a);if ( (b[0] == 45) && (b[1] == 45) && (b[2] == 45) && (b[3] == 45) && (b[4] == 45)) { break;out.write(b, 0, a);hastransfered += a;if (hastransfered >= size) {description[count] = "ERR: The file " + sourceFile[count] + " is too large to transfer. The whole process is interrupted."; successful = false;break;}}if (successful) {description[count] = "Right: The file " + sourceFile[count] + " has been transfered successfully.";}out.close();if (!successful) {sis.close();File tmp = new File(objectPath + objectFileName[count]);tmp.delete();}}catch (IOException ioe) {description[i] = ioe.toString();}}public static void main(String[] args) {System.out.println("Test OK");}}文件上传调用:MoqUpload.jsp〈%@ page contentType="text/html; charset=GB2312" %>〈html>〈head>〈title>文件上载〈/title>〈/head>〈body>〈form action="MoqUploadSubmit.jsp" enctype="MULTIPART/FORM-DA TA" method="post"> 作者姓名:〈input type="text" name="Author" />〈br />公司名称:〈input type="text" name="Company" />〈br />文件描述:〈input type="text" name="Comment" />〈br />选择文件1:〈input type="file" name="filename1" />〈br />选择文件2:〈input type="file" name="filename2" />〈br />选择文件3:〈input type="file" name="filename3" />〈br />选择文件4:〈input type="file" name="filename4" />〈br />〈input type="submit" value="上载" />〈/form>〈/body>〈/html>文件上传提交:MoqUploadSubmit.jsp〈%@ page contentType="text/html;charset=gb2312"%>〈jsp:useBean id="fileBean" scope="page" class="net.moq.www.MoqUploadBean" /> 〈%fileBean.setObjectPath("D:Temp");fileBean.setSize(10000*1024);fileBean.setSuffix(".gif.jpg.png.jpge.html.htm");fileBean.setSourceFile(request);String [] saSourceFile = fileBean.getSourceFile();String [] saObjectFile = fileBean.getObjectFileName();String [] saDescription = fileBean.getDescription();int iCount = fileBean.getCount();String sObjectPath = fileBean.getObjectPath();for(int i=0;i〈iCount;i++) {out.println("〈br>源始文件:");out.println(saSourceFile[i]);out.println("〈br>目标文件:");out.println(sObjectPath+saObjectFile[i]);out.println("〈br>上传说明:");out.println(saDescription[i]);out.println("〈br>");}out.println("〈br>作者:" + fileBean.getFieldValue("Author"));out.println("〈br>公司:" + fileBean.getFieldValue("Company"));out.println("〈br>说明:" + fileBean.getFieldValue("Comment"));%>三jspSmartUpload上传下载全攻略一、安装篇jspSmartUpload是由网站开发的一个可免费使用的全功能的文件上传下载组件,适于嵌入执行上传下载操作的JSP文件中。
FileUpload文件上传控件
FileBytes
FileContent FileName
获取上传文件的字节数组
获取指向上传文件的Stream对象 获取上传文件在客户端的文件名称
HasFile
PostedFile
获取一个布尔值,用于表示FileUpload控件是否已经包含一个 文件
FileUpload文件上传控件
本讲大纲: 1、FileUpload控件的概述 2、使用FileUpload控件上传图片文件
FileUpload控件的概述
FileUpload控件的主要功能是向指定目录上传文件,该控件包括一个文 本和一个浏览按钮。用户可以在文本框中输入完整的文件路径,或者通 过按钮浏览并选择需要上传的文件。FileUpload控件不会自动上传文件, 必须设置相关的事件处理程序,并在程序中实现文件上传。
获取一个与上传文件相关的HttpPostedFile对象,使用该
FileUpload上传控件用法详解
FileUpload上传控件⽤法详解FileUpload 类显⽰⼀个⽂本框控件和⼀个浏览按钮,使⽤户可以选择客户端上的⽂件并将它上载到 Web 服务器。
⽤户通过在控件的⽂本框中输⼊本地计算机上⽂件的完整路径(例如,C:\MyFiles\TestFile.txt )来指定要上载的⽂件。
⽤户也可以通过单击“浏览” 按钮,然后在“选择⽂件” 对话框中定位⽂件来选择⽂件。
注意:FileUpload 控件设计为仅⽤于部分页⾯呈现期间的回发情况,并不⽤于异步回发情况。
在 UpdatePanel 控件内部使⽤ FileUpload 控件时,必须通过⼀个控件来上载⽂件,该控件是⾯板的⼀个 PostBackTrigger 对象。
UpdatePanel 控件⽤于更新页⾯的选定区域⽽不是使⽤回发更新整个页⾯。
解决⽅法如下:<asp:ScriptManager ID="ScriptManager1" runat="server" /><asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate><asp:FileUpload ID="FileUpload1" runat="server" /><asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" /><br /></ContentTemplate><Triggers><asp:PostBackTrigger ControlID="Button1" /></Triggers></asp:UpdatePanel>⽤户选择要上载的⽂件后,FileUpload 控件不会⾃动将该⽂件保存到服务器。
使用FileUpload组件上传文件
使⽤FileUpload组件上传⽂件⼀、进⾏⽂件上传时, 表单需要做的准备1.请求⽅式为 POST:<form action="uploadServlet" method="post" ... >2. 使⽤ file 的表单域: <input type="file" name="file"/>3. 使⽤ multipart/form-data 的请求编码⽅式:<form action="uploadServlet" method="post" enctype="multipart/form-data"> File: <input type="file" name="file"/> <input type="submit" value="Submit"/></form>4. 关于 enctypeapplication/x-www-form-urlencoded:表单 enctype 属性的默认值。
这种编码⽅案使⽤有限的字符集,当使⽤了⾮字母和数字时,必须⽤”%HH”代替(H 代表⼗六进制数字)。
对于⼤容量的⼆进制数据或包含⾮ ASCII 字符的⽂本来说,这种编码不能满⾜要求。
multipart/form-data:form 设定了enctype=“multipart/form-data”属性后,表⽰表单以⼆进制传输数据。
⼆、服务端不能再使⽤ request.getParameter() 等⽅式获取请求信息. 获取不到, 因为请求的编码⽅式已经改为 multipart/form-data, 以⼆进制的⽅式来提交请求信息。
上传图片并生成缩略图
上传图片并生成缩略图最近公司说要在portal中添加一个上传图片并生成缩略图的方法,试了很久,终于搞定了;写下点心得吧,使大家少走弯路;首先做之前,google了一下,发现很多生产缩略图的方法:Java代码BufferedImage img = ImageIO.read(file);int h = img.getHeight();int w = img.getWidth();if(h>=96 && w >=96){int nw = 96;int nh = (nw * h) / w;if(nh>96) {nh = 96;nw = (nh * w) / h;}ByteArrayOutputStream out = new ByteArrayOutputStream();BufferedImage dest = new BufferedImage(nw, nh, BufferedImage.TYPE_INT_RGB);dest.getGraphics().drawImage(img,0,0,nw, nh,null);ImageIO.write(dest, "jpeg", out);imageThumbnail = out.toByteArray();}else{imageThumbnail = imageData;}BufferedImage img = ImageIO.read(file);int h = img.getHeight();int w = img.getWidth();if(h>=96 && w >=96){int nw = 96;int nh = (nw * h) / w;if(nh>96) {nh = 96;nw = (nh * w) / h;}ByteArrayOutputStream out = new ByteArrayOutputStream();BufferedImage dest = new BufferedImage(nw, nh, BufferedImage.TYPE_INT_RGB);dest.getGraphics().drawImage(img,0,0,nw, nh,null);ImageIO.write(dest, "jpeg", out);imageThumbnail = out.toByteArray();}else{imageThumbnail = imageData;}但是使用后发现,对于底色是透明的图片,生成的缩略图是别的颜色的,于是找原因,发现jpeg是最大的祸首;现在修改代码:Java代码BufferedImage img = ImageIO.read(file);int h = img.getHeight();int w = img.getWidth();if(h>=96 && w >=96){int nw = 96;int nh = (nw * h) / w;if(nh>96) {nh = 96;nw = (nh * w) / h;}ByteArrayOutputStream out = new ByteArrayOutputStream();BufferedImage dest = new BufferedImage(nw, nh,BufferedImage.TYPE_4BYTE_ABGR);dest.getGraphics().drawImage(img,0,0,nw, nh,null);GifEncoder.encode(dest, out);//ImageIO.write(dest, "gif", out);imageThumbnail = out.toByteArray();}else{imageThumbnail = imageData;}BufferedImage img = ImageIO.read(file);int h = img.getHeight();int w = img.getWidth();if(h>=96 && w >=96){int nw = 96;int nh = (nw * h) / w;if(nh>96) {nh = 96;nw = (nh * w) / h;}ByteArrayOutputStream out = new ByteArrayOutputStream();BufferedImage dest= new BufferedImage(nw, nh,BufferedImage.TYPE_4BYTE_ABGR);dest.getGraphics().drawImage(img,0,0,nw, nh,null);GifEncoder.encode(dest, out);//ImageIO.write(dest, "gif", out);imageThumbnail = out.toByteArray();}else{imageThumbnail = imageData;}其中使用了GifEncoder这也类,对应的jar包就是gif89.jar,这是个开源的包,做了修改,去掉了恶心的公司logo,现在生成的缩略图没有问题了,连gif的动画也能缩略,强啊。
asp.上传图片同时生成缩略图和水印图
/// <summary>/// </summary>/// <param name="upImage">HtmlInputFile控件</param>/// <param name="sSavePath">保存的路径,些为相对服务器路径的下的文件夹</param>/// <param name="sThumbExtension">缩略图的thumb</param>/// <param name="intThumbWidth">生成缩略图的宽度</param>/// <param name="intThumbHeight">生成缩略图的高度</param>/// <returns>缩略图名称</returns>publicstringUpLoadImage(HtmlInputFileupImage,stringsSavePath,stringsThumbE xtension, int intThumbWidth, int intThumbHeight){string sThumbFile = "";string sFilename = "";if (upImage.PostedFile != null){HttpPostedFile myFile = upImage.PostedFile;int nFileLen = myFile.ContentLength;if (nFileLen == 0)return "没有选择上传图片";//获取upImage选择文件的扩展名string extendName =System.IO.Path.GetExtension(myFile.FileName).ToLower();//判断是否为图片格式if (extendName != ".jpg" && extendName != ".jpge" && extendName != ".gif" &&extendName != ".bmp" && extendName != ".png")return "图片格式不正确";byte[] myData = new Byte[nFileLen];myFile.InputStream.Read(myData, 0, nFileLen);sFilename = System.IO.Path.GetFileName(myFile.FileName);int file_append = 0;//检查当前文件夹下是否有同名图片,有则在文件名+1while(System.IO.File.Exists(System.Web.HttpContext.Current.Server.MapPath(sSaveP ath + sFilename))){file_append++;sFilename = System.IO.Path.GetFileNameWithoutExtension(myFile.FileName)+ file_append.ToString() + extendName;}System.IO.FileStream newFile=newSystem.IO.FileStream(System.Web.HttpContext.Current.Server.MapPath(s SavePath + sFilename),System.IO.FileMode.Create, System.IO.FileAccess.Write);newFile.Write(myData, 0, myData.Length);newFile.Close();//以上为上传原图try{//原图加载using(System.Drawing.ImagesourceImage=System.Drawing.Image.FromFile(Syst em.Web.HttpContext.Current.Server.MapPath(sSavePath+sFilename))){//原图宽度和高度int width = sourceImage.Width;int height = sourceImage.Height;int smallWidth;int smallHeight;//获取第一张绘制图的大小,(比较原图的宽/缩略图的宽和原图的高/缩略图的高)if(((decimal)width)/height<=((decimal)intThumbWidth)/intThumbHeight){small Width = intThumbWidth;smallHeight = intThumbWidth * height / width;}else{smallWidth = intThumbHeight * width / height;smallHeight = intThumbHeight;}//判断缩略图在当前文件夹下是否同名称文件存在file_append = 0;sThumbFile=sThumbExtension+System.IO.Path.GetFileNameWithoutExtension( myFile.FileName) + extendName;while(System.IO.File.Exists(System.Web.HttpContext.Current.Server.MapPath(sSaveP ath+sThumbFile))){file_append++;sThumbFile=sThumbExtension+System.IO.Path.GetFileNameWithoutExtension( myFile.FileName) +file_append.ToString() + extendName;}//缩略图保存的绝对路径stringsmallImagePath=System.Web.HttpContext.Current.Server.MapPath(sSave Path) + sThumbFile;//新建一个图板,以最小等比例压缩大小绘制原图using(System.Drawing.Imagebitmap=newSystem.Drawing.Bitmap(smallWidth, smallHeight)){//绘制中间图using(System.Drawing.Graphicsg=System.Drawing.Graphics.FromImage(bitmap) ){//高清,平滑g.InterpolationMode=System.Drawing.Drawing2D.InterpolationMode.High;g.SmoothingMode=System.Drawing.Drawing2D.SmoothingMode.HighQuality;g.Clear(Color.Black);g.DrawImage(sourceImage,new System.Drawing.Rectangle(0, 0, smallWidth, smallHeight),new System.Drawing.Rectangle(0, 0, width, height),System.Drawing.GraphicsUnit.Pixel);}//新建一个图板,以缩略图大小绘制中间图using(System.Drawing.Imagebitmap1=newSystem.Drawing.Bitmap(intThumbWi dth, intThumbHeight)){//绘制缩略图using(System.Drawing.Graphicsg=System.Drawing.Graphics.FromImage(bitmap1 )){//高清,平滑g.InterpolationMode=System.Drawing.Drawing2D.InterpolationMode.High;g.SmoothingMode=System.Drawing.Drawing2D.SmoothingMode.HighQuality;g.Clear(Color.Black);int lwidth = (smallWidth - intThumbWidth) / 2;int bheight = (smallHeight - intThumbHeight) /2;g.DrawImage(bitmap,newRectangle(0,0,intThumbWidth,intThumbHeight),lwidth,b height,intThumbWidth,intThumbHeight,GraphicsUnit.Pixel);g.Dispose();bitmap1."Save(smallImagePath,System.Drawing.Imaging.ImageFormat.Jpeg);}}}}}catch{//出错则删除System.IO.File.Delete(System.Web.HttpContext.Current.Server.MapPath(sSaveP ath + sFilename));return "图片格式不正确";}//返回缩略图名称return sThumbFile;}return "没有选择图片";}HtmlInputFile控件我想大家都应该知道的,就是input type=file....下面把调用代码也一起C上来<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2."aspx.cs"Inherits="Default2" %><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1."0Transitional//EN""http:3."org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:3."org/1999/xhtml" ><head runat="server"><title>无标题页</title></head><body><form id="form1" runat="server"><div><inputid="File1"runat="server"type="file"/></div><asp:ButtonID="Button1"runat="server" OnClick="Button1_Click" Text="Button" /> </form></body></html>protected void Button1_Click(object sender, EventArgs e){string a =this.UpLoadImage(this.File1, "UpLoad/", "thumb_", 118, 118);}这样就会在你的UpLoad文件夹下多出两张图片,一张是原图,一张是缩略图。
用FileUpload控件上传图片并自动生成缩略图带文字和图片的水印图
<%@ Page Language="C#" AutoEventWireup="true" CodeFile=""Inherits="upfile_upfile" %>23<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/xhtml1/DTD/xhtml1-transitional.dtd">45<html xmlns="/xhtml" >6<head runat="server">7 <title>标题在这里</title>8</head>9<body>10 <form id="form1" runat="server">11 <div>12 <asp:FileUpload ID="FileUpload1" runat="server" />13 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="上传" /><br />14 <asp:Label ID="Label1" runat="server"></asp:Label></div>15 </form>16</body>17</html>1using System;2using System.Data;3using System.Configuration;4using System.Collections;5using System.Web;6using ;7using ;8using ;9using ;10using ;11using System.IO;1213public partial class upfile_upfile :14{15 protected void Page_Load(object sender, EventArgs e)16 { }1718 protected void Button1_Click(object sender, EventArgs e)19 {20 if (FileUpload1.HasFile)21 {22 string fileContentType = ;23 if (fileContentType == "image/bmp" || fileContentType == "image/gif" || fileContentType == "image/pjpeg")24 {25 string name = ; // 客户端文件路径2627 FileInfo file = new FileInfo(name);28 string fileName = ; // 文件名称29 string fileName_s = "s_" + ; // 缩略图文件名称30 string fileName_sy = "sy_" + ; // 水印图文件名称(文字)31 string fileName_syp = "syp_" + ; // 水印图文件名称(图片)32 string webFilePath = Server.MapPath("file/" + fileName); // 服务器端文件路径33 string webFilePath_s = Server.MapPath("file/" + fileName_s);//服务器端缩略图路径34 string webFilePath_sy = Server.MapPath("file/" + fileName_sy);//服务器端带水印图路径(文字)35 string webFilePath_syp = Server.MapPath("file/" + fileName_syp);// 服务器端带水印图路径(图片)36 string webFilePath_sypf = Server.MapPath("file/shuiyin.jpg");//服务器端水印图路径(图片)3738 if (!File.Exists(webFilePath))39 {40 try41 {42 FileUpload1.SaveAs(webFilePath); // 使用SaveAs 方法保存文件43 AddShuiYinWord(webFilePath, webFilePath_sy);44 AddShuiYinPic(webFilePath, webFilePath_syp,webFilePath_sypf);45 MakeThumbnail(webFilePath, webFilePath_s, 130, 130, "Cut"); // 生成缩略图方法46 Label1.Text = "提示:文件“" + fileName + "”成功上传,并生成“" + fileName_s + "”缩略图,文件类型为:" +47 + ",文件大小为:" ++ "B";48 }49 catch (Exception ex)50 {51 Label1.Text = "提示:文件上传失败,失败原因:" +ex.Message;52 }53 }54 else55 {56 Label1.Text = "提示:文件已经存在,请重命名后上传";57 }58 }59 else60 {61 Label1.Text = "提示:文件类型不符";62 }63 }64 }65 /**//**/66 /**//// <summary>67 /// 生成缩略图68 /// </summary>69 /// <param name="originalImagePath">源图路径(物理路径)</param>70 /// <param name="thumbnailPath">缩略图路径(物理路径)</param>71 /// <param name="width">缩略图宽度</param>72 /// <param name="height">缩略图高度</param>73 /// <param name="mode">生成缩略图的方式</param>74 public static void MakeThumbnail(string originalImagePath, string thumbnailPath, int width, int height, string mode)75 {76 originalImage =(originalImagePath);7778 int towidth = width;79 int toheight = height;8081 int x = 0;82 int y = 0;83 int ow = originalImage.Width;84 int oh = originalImage.Height;8586 switch (mode)87 {88 case "HW"://指定高宽缩放(可能变形)89 break;90 case "W"://指定宽,高按比例91 toheight = originalImage.Height * width / originalImage.Width;92 break;93 case "H"://指定高,宽按比例94 towidth = originalImage.Width * height / originalImage.Height;95 break;96 case "Cut"://指定高宽裁减(不变形)97 if ((double)originalImage.Width / (double)originalImage.Height >(double)towidth / (double)toheight)98 {99 oh = originalImage.Height;100 ow = originalImage.Height * towidth / toheight; 101 y = 0;102 x = (originalImage.Width - ow) / 2;103 }104 else105 {106 ow = originalImage.Width;107 oh = originalImage.Width * height / towidth; 108 x = 0;109 y = (originalImage.Height - oh) / 2;110 }111 break;112 default:113 break;114 }115116 //新建一个bmp图片117 bitmap = new , toheight);118119 //新建一个画板120 g = ;121122 //设置高质量插值法123 g.InterpolationMode = ;124125 //设置高质量,低速度呈现平滑程度126 g.SmoothingMode = ;127128 //清空画布并以透明背景色填充129 g.Clear(;130131 //在指定位置并且按指定大小绘制原图片的指定部分132 g.DrawImage(originalImage, new , 0, towidth,toheight),133 new , y, ow, oh),134 ;135136 try137 {138 //以jpg格式保存缩略图139 bitmap.Save(thumbnailPath, ;140 }141 catch (System.Exception e)142 {143 throw e;144 }145 finally146 {147 originalImage.Dispose();148 bitmap.Dispose();149 g.Dispose();150 }151 }152153 /**//**/154 /**//// <summary>155 /// 在图片上增加文字水印156 /// </summary>157 /// <param name="Path">原服务器图片路径</param>158 /// <param name="Path_sy">生成的带文字水印的图片路径</param> 159 protected void AddShuiYinWord(string Path, string Path_sy)160 {161 string addText = "测试水印";162 image = ;163 g = ;164 g.DrawImage(image, 0, 0, image.Width, image.Height);165 f = new "Verdana", 16);166 b = new(;167168 g.DrawString(addText, f, b, 15, 15);169 g.Dispose();170171 image.Save(Path_sy);172 image.Dispose();173 }174175 /**//**/176 /**//// <summary>177 /// 在图片上生成图片水印178 /// </summary>179 /// <param name="Path">原服务器图片路径</param>180 /// <param name="Path_syp">生成的带图片水印的图片路径</param> 181 /// <param name="Path_sypf">水印图片路径</param>182 protected void AddShuiYinPic(string Path, string Path_syp, string Path_sypf)183 {184 image = ;185 copyImage = ;186 g = ;187 g.DrawImage(copyImage, new -copyImage.Width, image.Height - copyImage.Height, copyImage.Width, copyImage.Height), 0, 0, copyImage.Width, copyImage.Height, ;188 g.Dispose();189190 image.Save(Path_syp);191 image.Dispose();192 }193}。
file-upload 用法vue2
file-upload在Vue2中的用法file-upload是一个用于在Vue2中实现文件上传功能的插件,它可以轻松地实现文件上传的功能,并且具有丰富的配置选项和扩展功能。
在本文中,我们将介绍file-upload在Vue2中的用法,包括基本的文件上传、进度显示、文件类型限制、大小限制等。
一、安装file-upload我们需要使用npm安装file-upload插件:npm install file-upload --save安装完成后,我们可以在Vue组件中引入file-upload来使用它的功能:import FileUpload from 'file-upload'e(FileUpload)二、基本用法要在Vue2中实现文件上传功能,我们可以使用file-upload提供的组件<FileUpload>来实现。
下面是一个基本的文件上传示例:<template><FileUploadaction="/upload":showUploadList="false"change="handleChange"><button>选择文件</button></FileUpload></template><script>export default {methods: {handleChange(file, fileList) {console.log(file, fileList)}}}</script>在上面的示例中,我们使用<FileUpload>组件来实现文件上传功能,其中action属性指定了文件上传的接口位置区域,showUploadList属性指定了是否显示上传列表,change事件监听文件上传状态的变化。
C# 上传图片,生成缩略图,生成文字或图像水印图
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx. cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ///TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title></head><body><form id="form1" runat="server"><div> <table><tr><td style="width: 100px">上传图片:</td><td style="width: 100px"><asp:FileUpload ID="FileUpload1" runat="serve r" /></td><td style="width: 100px"><asp:Button ID="Button1" runat="server" OnCli ck="Button1_Click" Text="上传" /></td></tr><tr><td style="width: 100px" valign="top">原图:</td><td style="width: 100px"><asp:Image ID="Image1" runat="server" /></td> <td style="width: 100px"></td></tr><tr><td style="width: 100px" valign="top">缩略图:</td><td style="width: 100px"><asp:Image ID="Image2" runat="server" /></td> <td style="width: 100px"></td></tr><tr><td style="width: 100px" valign="top">加水印:</td><td style="width: 100px"><asp:Image ID="Image3" runat="server" /></td> <td style="width: 100px"></td></tr></table></div></form></body></html>view plaincopy to clipboardprint?ing System;ing System.Data;ing System.Configuration;ing System.Web;ing System.Web.Security;ing System.Web.UI;ing System.Web.UI.WebControls;ing System.Web.UI.WebControls.WebParts;ing System.Web.UI.HtmlControls;ing System.Drawing;11.12.public partial class_Default : System.Web.UI.Page13.{14.protected void Page_Load(object sender, EventArgs e)15.{16.17.}18.protected void Button1_Click(object sender, EventArgs e)19.{20.string filename = FileUpload1.FileName;21.string nowpath = Server.MapPath(".") + "\\";22.filename = nowpath + filename;23.24.//保存原图25.FileUpload1.SaveAs(filename);26.27.System.Drawing.Image image, newimage, syimage;28.System.Drawing.Image.GetThumbnailImageAbort callb = null;29.image = System.Drawing.Image.FromFile(filename);30.syimage = System.Drawing.Image.FromFile(Server.MapPath(".") + "\\" + "缩略图.gif");//要目录下放一个"缩略图.gif"文件,可以从网上下载:/img/baidu.gif31.32.//保存缩略图33.newimage = image.GetThumbnailImage(100, 100, callb, new IntPtr());34.newimage.Save(filename + ".缩略图.png");35.newimage.Dispose();36.37.//处理原图片38.Graphics g = Graphics.FromImage(image);39.Font f = new Font("隶书", 16);40.Brush b = new SolidBrush(ColorTranslator.FromHtml("#FF0000"));41.string addText = "文字水印内容";42.g.DrawString(addText, f, b, 10, 10);43.g.DrawImageUnscaled(syimage, 50, 50);44.//g.DrawImage(newimage,50,50,100,100);45.g.Dispose();46.47.//生成水印图48.image.Save(filename + ".水印.png");49.50.image.Dispose();51.syimage.Dispose();52.53.Image1.ImageUrl = FileUpload1.FileName;54.Image2.ImageUrl = FileUpload1.FileName + ".缩略图.png";55.Image3.ImageUrl = FileUpload1.FileName + ".水印.png";56.57.}58.}。
WebUploader文件上传插件使用详解
WebUploader⽂件上传插件使⽤详解WebUploader⽂件上传组件在现代的浏览器⾥⾯能充分发挥HTML5的优势,同时⼜不摒弃主流IE浏览器,沿⽤原来的FLASH 运⾏时,兼容IE6+,iOS 6+, android 4+。
两套运⾏时,同样的调⽤⽅式,可供⽤户任意选⽤。
采⽤⼤⽂件分⽚并发上传,极⼤的提⾼了⽂件上传效率。
⼀、功能介绍分⽚、并发分⽚与并发结合,将⼀个⼤⽂件分割成多块,并发上传,极⼤地提⾼⼤⽂件的上传速度。
当⽹络问题导致传输错误时,只需要重传出错分⽚,⽽不是整个⽂件。
另外分⽚传输能够更加实时的跟踪上传进度。
预览、压缩⽀持常⽤图⽚格式jpg,jpeg,gif,bmp,png预览与压缩,节省⽹络数据传输。
解析jpeg中的meta信息,对于各种orientation做了正确的处理,同时压缩后上传保留图⽚的所有原始meta数据。
多途径添加⽂件⽀持⽂件多选,类型过滤,拖拽(⽂件&⽂件夹),图⽚粘贴功能。
粘贴功能主要体现在当有图⽚数据在剪切板中时(截屏⼯具如QQ(Ctrl + ALT + A), ⽹页中右击图⽚点击复制),Ctrl + V便可添加此图⽚⽂件。
HTML5 & FLASH兼容主流浏览器,接⼝⼀致,实现了两套运⾏时⽀持,⽤户⽆需关⼼内部⽤了什么内核。
同时Flash部分没有做任何UI相关的⼯作,⽅便不关⼼flash的⽤户扩展和⾃定义业务需求。
MD5秒传当⽂件体积⼤、量⽐较多时,⽀持上传前做⽂件md5值验证,⼀致则可直接跳过。
如果服务端与前端统⼀修改算法,取段md5,可⼤⼤提升验证性能,耗时在20ms左右。
易扩展、可拆分采⽤可拆分机制, 将各个功能独⽴成了⼩组件,可⾃由搭配。
采⽤AMD规范组织代码,清晰明了,⽅便⾼级玩家扩展。
引⼊资源使⽤Web Uploader⽂件上传需要引⼊三种资源:JS, CSS, SWF。
<!--引⼊CSS--><link rel="stylesheet" type="text/css" href="webuploader⽂件夹/webuploader.css"><!--引⼊JS--><script type="text/javascript" src="webuploader⽂件夹/webuploader.js"></script><!--SWF在初始化的时候指定,在后⾯将展⽰-->⼆、⽂件上传WebUploader只包含⽂件上传的底层实现,不包括UI部分。
django上传图片并生成缩略图方法示例
django上传图⽚并⽣成缩略图⽅法⽰例django 处理上传图⽚⽣成缩略图⾸先要注意form标签上必须有enctype="multipart/form-data"属性,另外要装好PIL库,然后就很简单了,如下是实例代码:upload.html<div id="uploader"><form id="upload" enctype="multipart/form-data" action="/ajax/upload/" method="post"><input id="file" name="file" type="file"><input type="submit" value="Upload"></form></div>view.py# -*- coding: utf-8 -*-from django.http import HttpResponseimport Imagedef upload(request):reqfile = request.FILES['file']image = Image.open(reqfile)image.thumbnail((128,128),Image.ANTIALIAS)image.save("/home/lhb/1.jpeg","jpeg")return HttpResponse("success.")下⾯介绍下⽣成缩略图质量差的解决办法。
使⽤python的PIL库的thumbnail⽅法⽣成缩略图的质量很差,需要使⽤resize⽅法来⽣成缩略图,并制定缩略图的质量,如下代码:image = image.resize((x, y), Image.ANTIALIAS)quality_val = 90image.save(filename, 'JPEG', quality=quality_val)总结以上就是本⽂关于django上传图⽚并⽣成缩略图⽅法⽰例的全部内容,希望对⼤家有所帮助。
微信小程序uploader上传文件并提交表单数据并在订单详情中显示图片和预览图片
微信⼩程序uploader上传⽂件并提交表单数据并在订单详情中显⽰图⽚和预览图⽚背景公司客户要求在订单中添加⽂件上传功能,就开始查阅资料之旅了,微信⼩程序扩展能⼒中有现成的⽂件上传组件uploader可以使⽤,⽽这个项⽬是在表单中添加上传图⽚功能,因此需要考虑⼀些代码逻辑。
⾸先,刚开始忽略了逻辑问题,直接在上传⽂件的时候通过接⼝提交到后台,接着遭到了质疑:“如果⽤户没提交表单,上传的图⽚就已经到后台了,有点不合逻辑吧”然后,重新整理逻辑,先把图⽚临时缓存⼀下,提交表单的时候,拿到缓存数据,通过接⼝把图⽚提交到后台,再把表单数据提交到后台(两个接⼝是分开的,后台给的,就这样⽤呗)uploader简介uploader是微信⼩程序WeUI组件库中的⼀个图⽚上传的组件,可以在⼩程序开发⽂档中--扩展能⼒--表单组件中找到相关⽤法。
这是⼀个集合了图⽚选择、上传、预览、删除的完整组件,属性定义也⽐较全⾯,可以⾃定义上传个数,有上传成功提醒和失败提醒,点击预览功能等,基本可以涵盖图⽚⽂件上传的所有功能要求。
⽤起来也很⽅便,在json⽂件中加⼊以下引⽤(可在官⽅⽂档找到),然后在wxml⽂件中直接引⼊该组件就⾏,使⽤起来很⽅便{"usingComponents": {"mp-uploader": "weui-miniprogram/uploader/uploader"}}官⽅⽂档提供了简单的使⽤案例,如图所⽰附上官⽅地址:https:///miniprogram/dev/extended/weui/uploader.html官⽅提供的这部分代码⾥⾯其实只需要补充uplaodFile上传⽅法调⽤后台上传图⽚的接⼝,上传功能就可以使⽤了,这算是⼀个可⽤的完整demo。
实际使⽤起来,还是需要完善⼀下,废话不多说,直接上代码~⽤法与代码1.在json⽂件中引⼊组件"usingComponents": {"mp-uploader": "../../weui/uploader/uploader",}2.在wxml⽂件中引⼊暂时只需要上传⼀张图⽚,设置max-count等于1即可⽂字版:<view class="upload bg1 w90 box-shadow1 mar-ao p10 mar-tp10"><view class="message w100 p10 bor-bottom " style="color:#444">上传附件</view><view class="page__bd" style="padding:0 10px;"><mp-uploader binddelete="deleteFile" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}"upload="{{uplaodFile}}" files="{{files}}" max-count="1" title=""></mp-uploader><!-- max-size="{{5*1024}}" --></view>3.在js⽂件中写对应⽅法添加官⽅demo的内容,并修改对应⽅法,直接贴图:修改uplaodFile⽅法,调⽤resolve({urls})⽅法设置上传成功状态,保存临时⽂件⽬录tempFilePaths,后⾯提交后台时再来拿数据上传⽂件的实现,后⾯表单提交时调⽤表单提交部分,先将上传的图⽚提交到后台,再把表单数据提交⽂字版://------------------附件上传开始------------------------chooseImage: function (e) {var that = this;wx.chooseImage({count: 9,sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认⼆者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认⼆者都有success: function (res) {tempFilePaths = res.tempFilePaths;// 返回选定照⽚的本地⽂件路径列表,tempFilePath可以作为img标签的src属性显⽰图⽚ that.setData({files: that.data.files.concat(res.tempFilePaths)});}})},previewImage: function (e) {wx.previewImage({current: e.currentTarget.id, // 当前显⽰图⽚的http链接urls: this.data.files // 需要预览的图⽚http链接列表})},selectFile(files) {uploadArr = [];uploadIndex = 0;for(var i=0;i<files.tempFilePaths.length;i++){uploadArr.push(files.tempFilePaths[i])}console.log(uploadArr,'9999999')// uploadArr = files.tempFilePaths// 返回false可以阻⽌某次⽂件上传},// 缓存⽂件uplaodFile(files) {console.log('upload files', files);var that = this;// ⽂件上传的函数,返回⼀个promisereturn new Promise((resolve, reject) => {const tempFilePaths = files.tempFilePaths;that.setData({filesUrl: tempFilePaths})var object = {};object['urls'] = tempFilePaths;resolve(object);})},//上传单个⽂件uploadFile(url, filePath) {return new Promise((resolve, reject) => {wx.uploadFile({url: url, //仅为⽰例,⾮真实的接⼝地址filePath:filePath,name: 'file',// formData: param,success (res){ //上传成功console.log(res)//成功调⽤接⼝resolve(JSON.parse(res.data));},fail(err){console.log(err)wx.showToast({ title: '请求失败,请刷新后重试', icon: 'none' });reject(err)}})})},uploadError(e) {console.log('upload error', e.detail)},uploadSuccess(e) {console.log('upload success', e.detail)},formSubmit:function() {let uploadUrl = '你的后台接⼝'let filePath = uploadArr[uploadIndex]this.uploadFile(uploadUrl,filePath).then((res) => { //上图图⽚并保存表单 if (res.Code == "Success") {wx.showToast({title: '添加成功'});wx.navigateBack({ //返回上⼀页delta: 1,})}})wx:wx.request({url: '你的后台接⼝',method: "POST",data: that.data.form,header: {'Content-Type': 'application/json'},success: (res) => {console.log(res);if (res.data.code == '200') {wx.setStorageSync('detailsList', []);that.setData({pinLeiListData:[]});Toast({type: 'success',message: '提交成功',onClose: () => {wx.reLaunch({url: "/pages/index/index",})},});}else if(res.data.code == '400'){Toast({type: 'fail',message: res.data.message,duration:4000});}},})},欢迎留⾔指正!。
图片上传压缩成缩略图的代码
图片上传压缩成缩略图的代码// 按模版比例生成缩略图(以流的方式获取源文件)//生成缩略图函数//顺序参数:源图文件流、缩略图存放地址、模版宽、模版高//注:缩略图大小控制在模版区域内public static void MakeSmallImg(System.IO.Stream fromFileStream,string fileSaveUrl,System.Double templateWidth,System.Double templateHeight){//从文件取得图片对象,并使用流中嵌入的颜色管理信息System.Drawing.Image myImage = System.Drawing.Image.FromStream(fromFileStream,true);//缩略图宽、高System.Double newWidth = myImage.Width , newHeight = myImage.Height;//宽大于模版的横图if(myImage.Width>myImage.Height || myImage.Width==myImage.Height){if(myImage.Width > templateWidth){//宽按模版,高按比例缩放newWidth = templateWidth;newHeight = myImage.Height * (newWidth/myImage.Width);}}//高大于模版的竖图else{if(myImage.Height > templateHeight){//高按模版,宽按比例缩放newHeight = templateHeight;newWidth = myImage.Width * (newHeight/myImage.Height);}}//取得图片大小System.Drawing.Size mySize = new Size((int)newWidth,(int)newHeight);//新建一个bmp图片System.Drawing.Image bitmap = new System.Drawing.Bitmap(mySize.Width,mySize.Height);//新建一个画板System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);//设置高质量插值法g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;//设置高质量,低速度呈现平滑程度g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;//清空一下画布g.Clear(Color.White);//在指定位置画图g.DrawImage(myImage , new System.Drawing.Rectangle(0, 0, bitmap.Width, bitmap.Height) ,new System.Drawing.Rectangle(0, 0,myImage.Width,myImage.Height) ,System.Drawing.GraphicsUnit.Pixel);///文字水印//System.Drawing.GraphicsG=System.Drawing.Graphics.FromImage(bitmap);//System.Drawing.Font f=new Font("宋体",10);//System.Drawing.Brush b=new SolidBrush(Color.Black);//G.DrawString("myohmine",f,b,10,10);//G.Dispose();///图片水印//System.Drawing.Image copyImage = System.Drawing.Image.FromFile(System.Web.HttpContext.Curre nt.Server.MapPath("pic/1.gif"));//Graphics a = Graphics.FromImage(bitmap);//a.DrawImage(copyImage, new Rectangle(bitmap.Width-copyImage.Width,bitmap.Height-copyImage.Height,copyImage.Width, copyImage.Height),0,0, copyImage.Width, copyImage.Height, GraphicsUnit.Pixel);//copyImage.Dispose();//a.Dispose();//copyImage.Dispose();//保存缩略图bitmap.Save(fileSaveUrl , System.Drawing.Imaging.ImageFormat.Jpeg);g.Dispose();myImage.Dispose();bitmap.Dispose();}。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
(double)toheight) { oh = originalImage.Height; ow = originalImage.Height * towidth / toheight; y = 0; x = (originalImage.Width - ow) / 2; } else { ow = originalImage.Width; oh = originalImage.Width * height / towidth; x = 0; y = (originalImage.Height - oh) / 2; } break; default: break; } //新建一个bmp图片 System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight); //新建一个画板 System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap); //设置高质量插值法 g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; //设置高质量,低速度呈现平滑程度 g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; //清空画布并以透明背景色填充 g.Clear(System.Drawing.Color.Transparent); //在指定位置并且按指定大小绘制原图片的指定部分 g.DrawImage(originalImage, new System.Drawing.Rectangle(0, 0, towidth, toheight), new System.Drawing.Rectangle(x, y, ow, oh), System.Drawing.GraphicsUnit.Pixel); try {
} } /// <summary> /// 生成缩略图 /// </summary> /// <param name="originalImagePath">源图路径(物理路 径)</param> /// <param name="thumbnailPath">缩略图路径(物理路 径)</param> /// <param name="width">缩略图宽度</param> /// <param name="height">缩略图高度</param> /// <param name="mode">生成缩略图的方式</param> public static void MakeThumbnail(string originalImagePath, string thumbnailPath, int width, int height, string mode) { System.Drawing.Image originalImage = System.Drawing.Image.FromFile(originalImagePath); int towidth = width; int toheight = height; int x = 0; int y = 0; int ow = originalImage.Width; int oh = originalImage.Height; switch (mode) { case "HW"://指定高宽缩放(可能变形) break; case "W"://指定宽,高按比例 toheight = originalImage.Height * width / originalImage.Width; break; case "H"://指定高,宽按比例 towidth = originalImage.Width * height / originalImage.Height; break; case "Cut"://指定高宽裁减(不变形) if ((double)originalImage.Width / (double)originalImage.Height > (double)towidth /
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.IO; public partial class upfile_upfile : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { if (FileUpload1.HasFile) { string fileContentType = FileUpload1.PostedFile.ContentType; if (fileContentType == "image/bmp" || fileContentType == "image/gif" || fileContentType == "image/pjpeg") { string name = FileUpload1.PostedFile.FileName; // 客户端文件路径 FileInfo file = new FileInfo(name); string fileName = ; // 文件名称 string fileName_s = "s_" + ; // 缩略图文件名称 string fileName_sy = "sy_" + ; // 水印图文件名称(文字) string fileName_syp = "syp_" + ; // 水印图文件名称(图片) string webFilePath = Server.MapPath("file/" + fileName); // 服务器端文件路径 string webFilePath_s = Server.MapPath("file/" + fileName_s); // 服务器端缩略图路径 string webFilePath_sy =
//以jpg格式保存缩略图 bitmap.Save(thumbnailPath, System.Drawing.Imaging.ImageFormat.Jpeg); } catch (System.Exception e) { throw e; } finally { originalImage.Dispose(); bitmap.Dispose(); g.Dispose(); } } /// <summary> /// 在图片上增加文字水印 /// </summary> /// <param name="Path">原服务器图片路径</param> /// <param name="Path_sy">生成的带文字水印的图片路径</param> protected void AddShuiYinWord(string Path, string Path_sy) { string addText = "测试水印"; System.Drawing.Image image = System.Drawing.Image.FromFile(Path); System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(image); g.DrawImage(image, 0, 0, image.Width, image.Height); System.Drawing.Font f = new System.Drawing.Font("Verdana", 16); System.Drawing.Brush b = new System.Drawing.SolidBrush(System.Drawing.Color.Blue); g.DrawString(addText, f, b, 15, 15); g.Dispose(); image.Save(Path_sy); image.Dispose(); } /**//// <summary>
Server.MapPath("file/" + fileName_sy); // 服务器端带水印图路 径(文字) string webFilePath_syp = Server.MapPath("file/" + fileName_syp); // 服务器端带水印图 路径(图片) string webFilePath_sypf = Server.MapPath("file/shuiyin.jpg"); // 服务器端水印图路径(图 片) if (!File.Exists(webFilePath)) { try { FileUpload1.SaveAs(webFilePath); // 使用 SaveAs 方法保存文件 AddShuiYinWord(webFilePath, webFilePath_sy); AddShuiYinPic(webFilePath, webFilePath_syp, webFilePath_sypf); MakeThumbnail(webFilePath, webFilePath_s, 130, 130, "Cut"); // 生成缩略图方法 Label1.Text = "提示:文件“" + fileName + "”成功上传,并生成“" + fileName_s + "”缩略图, 文件类型为:" + FileUpload1.PostedFile.ContentType + ",文件 大小为:" + FileUpload1.PostedFile.ContentLength + "B"; } catch (Exception ex) { Label1.Text = "提示:文件上传失败,失败原因:" + ex.Message; } } else { Label1.Text = "提示:文件已经存在,请重命名后上传"; } } else { Label1.Text = "提示:文件类型不符"; }