图片和文件上传

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

$(‘#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-10-12 14:46:53

图片和文件上传的相关文章

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

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

AFNetworking之多图片-文件上传

在分享经验之前,先说点题外话,之前的一个项目涉及到了多图片的上传,本来以为是一个很简单的事情,却着实困扰了我好久,究其原因,一是我不够细心,二是与后台人员的交流不够充分.在此,我想将我的老师常说的一句话送给大家:“做一个细心的男人(女人)”.好了,闲话少说,进入正题. AFNetworking是我们在日常开发中,常用于发送网络请求的第三方类库.其中,我们经常用到的方法有两类,一是普通的网络请求,其常用方法为: //GET请求 - (AFHTTPRequestOperation *)GET:(NS

图片或文件上传阿里云服务

//图片上传到阿里云 [AcceptVerbs(HttpVerbs.Post)] public JsonResult Upload(HttpPostedFileBase fileData, string tupianming) { if (fileData != null) { try { // 文件上传后的保存路径 var extName = Path.GetExtension(fileData.FileName); if (string.IsNullOrWhiteSpace(extName)

uploadify多图片和文件上传网站应用

先要下载压缩包 www.uploadify.com/wp-content/uploads/files/uploadify.zip 1,模板文件引用 <!--引用jquery uploady*}--><script src="http://www.hq08.cn/public/jquery.js" type="text/javascript" charset="utf-8"></script><link r

Servlet3.0 多图片,文件上传

1.分析 上传文件的过程:客服端选择一个文件后,写入到服务器端,服务器端使用一个目录来存储该文件--底层IO流操作 2.jsp文件上的表单设计 表单传输格式用multipart/form-data,要上传的文件input标签name属性最好用同样的前缀或者后缀好获取 <form method="post" class="form-x" action="${pageContext.request.contextPath}/UserServlet.act

Android Webview实现图片、文件上传及启动相机功能

直接上代码,体会Webview强大的功能. webView.setWebChromeClient(webChromeClient); private String mCameraFilePath = null; private ValueCallback<Uri> mUploadMessage;// 表单的数据信息 private final static int FILECHOOSER_RESULTCODE = 1;// 表单的结果回调</span> <span style

点击图片实现文件上传

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <script type="text/javascript"> function F_Open_dialog() { document.getElementById("btn_file").click(); } <

图片上传和文件夹创建、文件上传

protected void btnUp_Click(object sender, EventArgs e)        { string savePath = @"images/";//图片保存路径            string fileName = Server.HtmlEncode(picupload.FileName);            string extension = System.IO.Path.GetExtension(fileName).ToLower

百度开源富文本编辑器 UEditor配置:图片上传和文件上传独立使用方法

使用UEditor编辑器自带的插件实现图片上传和文件上传功能,这里通过配置UEditor单独使用其内置的第三方插件swfupload来实现图片和文件的上传,通过对UEditor配置轻松实现图片批量上传,文件披批量上传 第一步:先配置UEditor <script src="ueditor/ueditor.config.js"></script> <script src="ueditor/ueditor.all.min.js">&l