html5 formData上传 针对app端

function uploadFile() {
        if ((document.getElementById("file").files[0].size / 1024).toFixed(2) > 2048) {
            alert(‘照片不能大于2M!‘);
        }else{
            var oldPic = $("#picurl").val();
            var url = "";
            if(oldPic != ""){
                url = "weixin/uploadTx?oldPic="+oldPic;
            }else{
                url = "weixin/uploadTx?oldPic=";
            }
            $(‘.photo_loading‘).show();
            var fd = new FormData();
            fd.append("header_img_id", document.getElementById("file").files[0]);
            var xhr = new XMLHttpRequest();
            //请求完成后执行的操作

            xhr.onload = function(evt) {
                var fileUrl = evt.target.responseText;
                fileUrl = delHtmlTag(fileUrl);

                var htfileurl = fileUrl.replace("thumb_","");
                $("#picurl").val(htfileurl);
                $("#tx-img").attr("src", "upload/"+fileUrl);
                $("#tx-img").show();
                $("#photo_add").hide();
                $(‘.photo_loading‘).hide();
            }

            xhr.open("POST", url);
            xhr.send(fd);
        }

    }

css

.upload_image{
    width: 70px;
    height: 70px;
    position: absolute;
    top: 2px;
    left: 2px;
    background: #EEE;
    opacity: 0;
    cursor: pointer;
}

.photo{
    position: relative;
    width: 70px;
    height: 70px;
    background-size: 100%;
}

.photo_loading{
    position:absolute;
    top:2px;
    left:2px;
    z-index:99;
    background: url(../../images/photo_loading.gif) no-repeat 0 0;
    opacity: 0.8;
    filter:alpha(opacity=80); width:70px; height:70px;
    display: none;
}

.photo_add{
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    border: 2px dotted #ccc;
    font-size: 24px;
}

html

<div  style="margin-top: 10px">
            <label class="div-label"><span class="x">*</span>本人照片:</label>
            <div class="photo">
                <div class="photo_loading"></div>
                <div class="photo_add" id="photo_add">+</div>
                <img src="" style="width: 70px;height: 70px;display: none;border: 2px dotted #ccc;" id="tx-img"/>
                <input id="file" name="file"   type="file" class="upload_image" onchange="uploadFile()">
            </div>
            <p style="margin-top: 10px;font-size: 13px;color: #999">(尺寸不大于2M)</p>
        </div>

控制层

@RequestMapping(value="/uploadTx")
    @ResponseBody
    public String uploadTx(MultipartFile header_img_id, String oldPic){
        //删除
        if(!oldPic.equals("")){
            String realPath = fileRootPathServ.getRealPath(oldPic);
            File file = new File(realPath);
            if(file.exists()){
                file.delete();
            }
        }

        String fileUrl = "";
        //上传图片
        if(!header_img_id.isEmpty()){
            FileModel fileModel = fileUploadSvc.uploadImg(header_img_id, "TX");
            fileUrl = fileModel.getFileUrl();
        }

        return fileUrl;
    }
时间: 2024-08-23 08:13:01

html5 formData上传 针对app端的相关文章

基于HT for Web矢量实现HTML5文件上传进度条

在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件上传进度条,矢量在<矢量Chart图表嵌入HTML5网络拓扑图的应用>一文中已经讲述了关于setCompType()方法的应用,今天我们用setImage()方法充分利用系统中定义好的矢量资源来实现文件上传进度条,我们先来看下效果图: 从效果图可以看到,向服务器上传了一个mp4文件,并在最下方显示

HTML5关于上传API的一些使用(上)

HTML5提供了很多有用的API,其中就包括上传的API,XMLHttpRequest2.0,在HTML5时代之前,需要进行二进制的上传一般都会才用flash的方案,但是当XMLHttpRequest2.0出来之后,完全可以使用HTML5的上传解决方案,能够非常方便的进行二进制上传进度的显示,上传图片的本地预览,甚至可以做到断点续传,分片上传,多文件上传等各种复杂的底层功能. 首先回顾一下XMLHttpRequest1.0的传输过程 关于XMLHttpRequest 初始化XMLHttpRequ

HTML5关于上传API的一些使用(中)

上一次写了关于HTML的上传API,XMLHttpRequest2.0的上传方式,以及HTML5中上传之前本地的预览,包括对于图片以及部分信息的预 览.这次我们就讲下HTML5中关于上传的一些各种个性化需求的处理,主要包括实时进度条,上传速度的实时显示等. 关于上传事件 首先要做到实时进度条这种需求,首先我们需要得到关于上传的各种事件,这些事件大部分都是在XMLHttpRequest这个对象下面: progress事件:上传进度事件. load事件:传输成功完成. abort事件:传输被用户取消

html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯

HTML5文件上传组件美化jQuery插件

简要教程 jQuery.filer是一款简单的HTML5文件上传组件美化jQuery插件.它能够完成单文件和多文件的上传,支持文件的拖拽,支持不同的文件格式校验,支持缩略图和图标等,是一款非常实用的文件上传插件.它的特点还有: 对文件上传File Input组件进行美化 支持多文件上传 支持校验文件:大小,扩展名等 支持创建文件的缩略图 每种类型的文件可以自定义图标 可以为缩略图,图标和input自定义模板和主题 可以移出已选择的文件 可以从剪切板粘贴图片 所有的图标在一个字体文件中 支持文件拖

html5文件上传

<!DOCTYPE html><html><head> <title>Html5 Ajax 上传文件</title></head><body> <progress id="progressBar" value="0" max="100"> </progress> <span id="percentage">&

canvas利用formdata上传到服务器

1.首先绘制canvas图片 <canvas id="myCanvas" width="100" height="100" style="border:1px solid #d3d3d3;border-radius:50%"> 您的浏览器不支持 HTML5 canvas 标签. </canvas> 这里canvas绘图就不是本文章讲解的内容,我们简单的在画布上写两个字: var canvas = doc

HTTP multipart/form-data 上传方式说明(有8个注意点)

( From: http://home.meegoq.com/home-space-do-blog-uid-17-id-81.html ) HTTP multipart/form-data 上传方式说明 已有 123 次阅读 2010-12-1 11:13 |个人分类:网络学习|关键词:HTTP multipart http上传文件方面的功能使用的协议是rfc1867 (http://www.ietf.org/rfc/rfc1867.txt) 为 http 协议.客户端的浏览器,如 Micros

Application Uploader-教你在Windows下上传iOS APP到苹果应用商店

现如今出现了很多跨平台移动开发工具,很多开发者选择了这些快速开发APP的平台,因此有些开发者可能没有配备Mac电脑,在上传iOS APP时会受到阻碍. 那能不能实现在Windows下上架苹果应用呢? 下面用到一个工具Application Uploader即可实现在Windows系统下,直接提交IPA到App Store. 苹果应用打包IPA过程中需要用到证书,Appuploader可以帮助我们创建iOS证书和p12文件,创建过程非常简单,只需输入证书名称,创建邮箱等信息即可创建证书.而且证书不