文档章节

java 项目使用 ajaxfileupload

donald121
 donald121
发布于 12/07 11:23
字数 842
阅读 5
收藏 0

html

    <style>
        #oDiv {
            height: 200px;
            width: 200px;
            border: 1px solid #000;
            text-align: center;
            margin-bottom: 10px;
        }
    </style>
    <div class="all">
        <div id="oDiv">
            <img src="" id="showPic" style="height:100%;width:100%" />
        </div>
        <input type="file"  id="oInput" name="file" onchange="ShopPictureInfoDlg.upload_cover(this)"/>
    </div>


<!-- form 表单里面的imageUrl录入框 实际是要隐藏的 -->
<input id="imageUrl" name="图片url" type="text" name="ImageUrl" placeholder="defaultPath" value=""/>

js:

注意里面的complete 设置为false ,因为该项目的ajax属性设置了需要执行compele的方法,而配置的环境却不可以解析,回有关于

XMLHttpRequest getResponseHeader() 没有这个function的错误

//具体的上传图片方法
function ajax_upload(feid, callback, ext) {
    if (image_check(feid)) {
        $.ajaxFileUpload({
            url: Feng.ctxPath +"/shop/uploadImage",
            secureuri : false,
            fileElementId: feid,
            dataType: 'json',
            data: {fileType: ext},//增加推送的属性
            type: 'post',
            async: true,
            complete: false,
            success:
                function (data) {
                    if (data.success){
                        $("#imageUrl").val(data.imagePath);
                        $("#showPic").attr("src", data.imagePath);
                    }
                    alert(data.message);
                },
            error:
                function (data) {
                    console.log(data);
                    console.log("error");
                }
        });
    }
};

 ajaxfileupload:

修改了里面uploadHttpData type="json", 由于返回的是application/json ,所以获取的数据回带上 <pre 标签,不是标准的xml 所以要做数据替换

            data = jQuery.parseJSON(jQuery(data).text());
            // eval("data = " + data);

/**
 * 初始化详情对话框
 */
var ShopPictureInfoDlg = {
    shopPictureInfoData : {},
    validateFields: {
        shopId: {
            validators: {
                notEmpty: {
                    message: '店铺id不能为空'
                }
            }
        },
        imageUrl: {
            validators: {
                notEmpty: {
                    message: '图片url不能为空'
                }
            }
        },
    }
};

/**
 * 清除数据
 */
ShopPictureInfoDlg.clearData = function() {
    this.shopPictureInfoData = {};
}

/**
 * 设置对话框中的数据
 *
 * @param key 数据的名称
 * @param val 数据的具体值
 */
ShopPictureInfoDlg.set = function(key, val) {
    this.shopPictureInfoData[key] = (typeof val == "undefined") ? $("#" + key).val() : val;
    return this;
}

/**
 * 设置对话框中的数据
 *
 * @param key 数据的名称
 * @param val 数据的具体值
 */
ShopPictureInfoDlg.get = function(key) {
    return $("#" + key).val();
}

/**
 * 关闭此对话框
 */
ShopPictureInfoDlg.close = function() {
    parent.layer.close(window.parent.ShopPicture.layerIndex);
}

/**
 * 收集数据
 */
ShopPictureInfoDlg.collectData = function() {
    this
    .set('id')
    .set('shopId')
    .set('imageUrl')
    .set('noteText')
    ;
}
/**
 * 验证数据是否为空
 */
ShopPictureInfoDlg.validate = function () {
    $('#shopPictureForm').data("bootstrapValidator").resetForm();
    $('#shopPictureForm').bootstrapValidator('validate');
    return $("#shopPictureForm").data('bootstrapValidator').isValid();
};
/**
 * 提交添加
 */
ShopPictureInfoDlg.addSubmit = function() {

    this.clearData();
    this.collectData();
    if (!this.validate()) {
        return;
    }
    //提交信息
    var ajax = new $ax(Feng.ctxPath + "/shopPicture/add", function(data){
        Feng.success("添加成功!");
        window.parent.ShopPicture.table.refresh();
        ShopPictureInfoDlg.close();
    },function(data){
        Feng.error("添加失败!" + data.responseJSON.message + "!");
    });
    ajax.set(this.shopPictureInfoData);
    ajax.start();
}

/**
 * 提交修改
 */
ShopPictureInfoDlg.editSubmit = function() {

    this.clearData();
    this.collectData();
    if (!this.validate()) {
        return;
    }
    //提交信息
    var ajax = new $ax(Feng.ctxPath + "/shopPicture/update", function(data){
        Feng.success("修改成功!");
        window.parent.ShopPicture.table.refresh();
        ShopPictureInfoDlg.close();
    },function(data){
        Feng.error("修改失败!" + data.responseJSON.message + "!");
    });
    ajax.set(this.shopPictureInfoData);
    ajax.start();
}


/**
 * 子窗口获取父窗口的值
 * @param id
 */
function init() {
    // 初始化内容
    var url = parent.document.URL;
    var shopId = $("#shopId",window.parent.document).text();
    if(url.indexOf("detail") != -1){
        $("#shopId").val(shopId);
    }
};
init();

/**
 * 图片上传
 */
ShopPictureInfoDlg.upload_cover = function(obj) {
    //回传后缀
    var filePath = $("input[name='file']").val();
    var extStart = filePath.lastIndexOf(".");
    var ext = filePath.substring(extStart, filePath.length).toUpperCase();

    ajax_upload(obj.id, function (data) { //function(data)是上传图片的成功后的回调方法
        var isrc = data.relatPath.replace(/\/\//g, '/'); //获取的图片的绝对路径
        $('#image').attr('src', basePath + isrc).data('img-src', isrc); //给<input>的src赋值去显示图片
    }, ext);
}

//具体的上传图片方法
function ajax_upload(feid, callback, ext) {
    if (image_check(feid)) {
        $.ajaxFileUpload({
            url: Feng.ctxPath +"/shop/uploadImage",
            secureuri : false,
            fileElementId: feid,
            dataType: 'json',
            data: {fileType: ext},//增加推送的属性
            type: 'post',
            async: true,
            complete: false,
            success:
                function (data) {
                    if (data.success){
                        $("#imageUrl").val(data.imagePath);
                        $("#showPic").attr("src", data.imagePath);
                    }
                    alert(data.message);
                },
            error:
                function (data) {
                    console.log(data);
                    console.log("error");
                }
        });
    }
};
function image_check(feid) { //自己添加的文件后缀名的验证
    var img = document.getElementById(feid);
    return /.(jpg|png|gif|bmp)$/.test(img.value) ? true : (function () {
        Feng.info('图片格式仅支持jpg、png、gif、bmp格式,且区分大小写。');
        return false;
    })();
}

$(function() {
    Feng.initValidator("shopPictureForm", ShopPictureInfoDlg.validateFields);
});

contrller:

只是为了返回数据,没写实质性文件保存

    /**
     * 图片上传
     */
    @RequestMapping(method = RequestMethod.POST  ,value = "/uploadImage" )
    @ResponseBody
    public Object UploadImage(@RequestPart("file") MultipartFile file){
        //文件上传暂时没找到显示返回自定义异常方法,使用正常数据返回
        Map<String,Object> result = new HashMap<>();
        String path = Class.class.getClass().getResource("/").getPath();
        path = path.replace("/target/classes/","/src/main/webapp/static/img/logo.png");
        result.put("success",true);
        result.put("message","上传成功!");
        result.put("imagePath",path);
        return result;
    }

 

© 著作权归作者所有

共有 人打赏支持
donald121
粉丝 2
博文 38
码字总数 15032
作品 0
广州
私信 提问
Jfinal的Ajax上传图片的异常

使用Jfinal需要异步上传图片以后得到上传图片的路径,在Jsp页面显示出来,所以用了一个 ajaxFileUpload:代码如下 function ajaxFileUpload() { $.ajaxFileUpload({ url : '', secureuri : f...

默默积极
2014/05/15
1K
6
简单的jQuery插件ajaxfileupload实现ajax上传文件例子

页面代码: <html> <!-- 引入相关的js文件,相对路径 --> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/ajaxfileupload.js"></sc......

清华漏子
2014/07/13
0
0
SpringMVC+jquery-fineuploader 文件上传

springmvc文件上传真头疼,网上搜了半天没发现都是TMD的用submit按钮提交到后台的,就没有插件的吗? 刚开始找到个ajaxfileUpload.还可以,单文件上传不错 ,怎么搞的网上百度一下很多. 最后...

javacc
2012/11/29
0
6
jQuery插件AjaxFileUpload实现ajax文件上传

1、引入AjaxFileUpload插件相关的js <script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js"></script><script type="text/javascript" src="<%=basePath%>resou......

刘yu
2015/04/22
0
0
ajaxFileUpload.js 使用报错

按照网上写的配置了ajaxFileUpload ,但是一点上传按钮就报错:TypeError: $.ajaxFileUpload is not a function function ajaxFileUpload(){ $("#loading").ajaxStart(function(){ $(this).......

menxin
2014/02/19
4.8K
5

没有更多内容

加载失败,请刷新页面

加载更多

09.ajax局部渲染---《Beetl视频课程》

本期视频实现分类实时获取; 内容简介:使用了局部渲染技术,实现分类的实时获取 一起学beetl目录:https://my.oschina.net/u/1590490?tab=newest&catalogId=6214598 作者:GK Beetl满足了更...

Gavin-King
17分钟前
1
0
同步访问共享的可变数据(66)

关键字synchronized 保证同一时刻,只有一个线程执行某一个方法或代码块 当一个对象被一个线程修改时,可以阻止其他线程看到其内部的不一致状态 正确的使用同步可以避免任何对象看到其不一致...

Java搬砖工程师
19分钟前
1
0
银行卡二要素真实性查询

验证用户的银行卡号、持卡人姓名是否真实。 示例代码: private static String host = "https://bank.market.alicloudapi.com";private static String path = "/bank2";private sta...

貔貅叔
23分钟前
1
0
iOS补位动画、沙漏效果、移动UITableViewCell、模拟贪吃蛇、拖拽进度等源码

iOS精选源码 JHAlertView - 一款黑白配色的HUD之沙漏效果 继承UIButton的自定义按钮SPButton 用递归算法实现iOS补位动画 iOS 长按移动UITableViewCell JHLikeButton - 有趣的点赞动画 兼容X...

Android爱开源
34分钟前
1
0
上币至iamToken

https://github.com/consenlabs/token-profile 点击Fork按钮,插入到自己的github项目中 cd /Users/shijun/Desktop/blockChain/iamToken git clone https://github.com/yellmi1983/token-pro......

八戒八戒八戒
37分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部