图片(头像)或文件上传

用于记录以供下次快速查阅

$(‘#fileImage‘).change(function(e){
    e.stopPropagation();
    e.preventDefault();
    var files=this.files;
    var imgSrc;
    if(files.length){
        if(files[0].type.indexOf("image") == 0) {
            if (files[0].size >= 512000) {
                alert(‘图片"‘+ files[0].name +‘"大于500k,请重新选择!‘);
                return;
            }
        } else {
            alert(‘文件"‘ + files[0].name + ‘"不是图片。‘);
            return;
        }
          imgSrc=window.URL.createObjectURL(files[0]);
          $(‘#user-avatar-img‘).attr(‘src‘,imgSrc);
    }
});
$(‘#submitBtn‘).on(‘click‘,function(){
    var data=new FormData(document.forms.nameItem(‘uploadForm‘));    //data.append(‘file‘,file);  //添加或指定传递的对象
    var req=new XMLHttpRequest();
    req.open(‘POST‘,‘http://url‘,true);
    req.send(data);
})

FormData参考自:http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html

files对象:https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications

时间: 2024-08-07 06:43:14

图片(头像)或文件上传的相关文章

在ASP.NET中实现图片、视频文件上传方式

一.图片 1.在前端用<asp:FileUpload ID="UpImgName" runat="server"/>控件 2.在后台.cs中写上 protected void btnSubmit_Click(object sender,EventArgs e) { string strImgPath=string.Empty; string strDateTime=dateTime.Now.Tostring("yyyyMMddhhmmss&qu

处理带说明信息的图片与处理文件上传 四(62)

一 .处理带说明信息的图片与处理文件上传  void delete()           删除保存在临时目录中的文件.     String getContentType()  获取文档的类型           Returns the content type passed by the browser or null if not defined. String getFieldName() 获取字段的名称,即name=xxxx           Returns the name of

文件上传-------头像上传预览

这次来讲怎么来用代码完成头像更换 在上篇博客中也说了图片上传,但选择文件的之后,在网页上并没有显示这张图片,如果是要做头像的话,最好有头像预览 就像平时我们换QQ头像那样,一点图片就会出来文件预览,然后再选择一张图片,点击,页面就会换成你刚刚点击的那张图片 来看一下做法,先说第一个页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D

两种文件上传的实现-Ajax和form+iframe

话说现在很多很多项目需要用到文件上传,自从有了HTML5之后,上传就变的超级简单了.HTML5支持多图片上传,而且支持ajax上传,而且支持上传之前图片的预览,而且支持图片拖拽上传,而且还是纯粹利用file控件实现,JS代码寥寥,想不让人称赞都难啊! HTML5Ajax上传 html5的上传实现,是需要file控件以及XMLHttpRequest请求.下面是我封装的一个上传插件: function fileUpload(options) { var opts = options || {}; v

断点调试 WebUploader获取文件上传成功路径问题

WebUploader获取文件上传成功路径问题 最近在使用WebUploader的时候,上传文件成功,但是怎么也获取不到返回的图片文件成功路径,上传成功后,返回文件代码如下: uploader.on('uploadSuccess', function (file, response) { var imgurl = response.url; //上传图片的路径 alert(imgurl);}); 之后看一下浏览器调试结果: 可以看到imgurl=undefined,但同时response _ra

spring 文件上传 + 图片缩放 + 图片截取(头像功能)

实现图片上传 用户必须能够上传图片,因此需要文件上传的功能.比较常见的文件上传组件有Commons FileUpload,这里我们选择Commons FileUpload. 首先是页面的form表单设置,记住要配method和enctype属性哦!! <form action="upload.do" method="post"            enctype="multipart/form-data">           &l

MVC&amp;WebForm对照学习:文件上传(以图片为例)

在web应用中,文件上传是个很普遍的功能,那么今天就来小结一下asp.net中文件上传的方式.首先我们快速来回忆一下WebForm中的文件上传的方法. Part 1 WebForm中的文件上传  FileUpload服务器控件 aspx: <div> <asp:Image ImageUrl="~/uploads/1.jpg" ID="img2" runat="server" Width="150px" Hei

.Net Core 图片文件上传下载

当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. 一.开发环境 毋庸置疑,宇宙第一IDE VisualStudio 2017 二.项目结构 FilesController 文件上传下载控制器 PictureController 图片上传下载控制器 Return_Helper_DG 返回值帮助类 三.关键代码 1.首先我们来看Startup.cs

基于JSP+Servlet+JavaBean的图片或文件上传

基于JSP+Servlet+JavaBean的图片或文件上传 一.概述 现在不管是博客论坛还是企业办公,都离不开资源的共享.通过文件上传的方式,与大家同分享,从而达到大众间广泛的沟通和交流,我们既可以从中获得更多的知识和经验,也能通过他人的反馈达到自我改进和提升的目的. 下面我就为大家介绍 web项目中的这一上传功能,那么文件是如何从本地发送到服务器的呢?大家可以在在线视频课程进修学习<基于JSP+Servlet+JavaBean的人力资源管理系统开发>中第22课-项目开发-其它功能完善-图片

MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件02-多文件上传

上一篇中,使用客户端jJSAjaxFileUploader插件实现单文件异步上传,本篇实现多文件异步上传. 本篇源码在github,先看效果: ● 上传文件显示进度条. ● 停止上传按钮和关闭缩略图按钮. ● 限制上传文件的类型. ● 限制上传文件的尺寸. ●同时上传多个文件成功后显示缩略图.文件名: ● 点击界面上的删除按钮,界面删除,同步删除文件夹中文件. ● 再点击上传文件,界面追加一行新的缩略图.文件名.删除按钮: □ HomeController 把上传的文件名改成以GUID命名的格式