当前位置: 首页 > 工具软件 > Q.js > 使用案例 >

Q.Uploader.js上传图片时传参

耿锦
2023-12-01

Q.Uploader.js上传图片是真的方便,不用不知道,谁用谁喜欢!
使用Q.Uploader.js上传图片的同时如何传参呢?让我们一睹为快吧!
需引入的js

<link href="~js/WebUpLoad/demo.css" rel="stylesheet" type="text/css" />
<link href="~js/WebUpLoad/uploader.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~js/WebUpLoad/Q.js"></script>
<script type="text/javascript" src="~js/WebUpLoad/Q.Uploader.js"></script>
<script type="text/javascript" src="~js/WebUpLoad/Q.Uploader.UI.Image.js"></script>
<script type="text/javascript" src="~js/WebUpLoad/Q.Uploader.UI.File.js"></script>

html

 <div class="jtable-input-label">
     上传图片<span style="color:Red;">(图片格式为*.jpg;*.bmp;*.png;*.gif;建议尺寸1920*520;不能超过10M)</span>
 </div>
 <div class="ImgUpload">
     <a id="upload-target" class="x-button"></a>
     <span id="status"></span><input type="hidden" id="Banner" name="Banner" value="" />
 </div>
 <div id="myimage" style="text-align:left;"></div>

调用js

$(document).ready(function () {
	PhotoUpload();//页面加载时需要初始化
})
$(document).on('click', '.remove', function (event) {
    $(this).prev('img').remove();
    $(this).parent('div').prev('div').show();
    $(this).parent('div').prev('div').children('input[type=hidden]').val('');
    $(this).remove();
})
function PhotoUpload() {
    var WebSite = "http://123.cn";
    var Uploader = Q.Uploader;
    var data = "";
    var uploader = new Uploader({
        url: "#{uploadLink}".toAjax(),
        //data: { cusfolder: $("#SiteUrl").val() },
        target: document.getElementById("upload-target"),
        view: document.getElementById("myimage"),
        multiple: false,    //选择文件时是否允许多选
        //将auto配置为false以手动上传
        auto: true,
        allows: ".jpg,.gif,.png,.bpm",
        on: {
            //添加之前触发
            add: function (task) {
                if ($("#SiteUrl").val() == "") {
                    alert("页面地址不能为空!");
                    $("#SiteUrl").focus();
                    return false;
                };
                if (task.disabled) return alert("允许上传的文件格式为:" + this.ops.allows);
                this.data = { cusfolder: $("#SiteUrl").val() };//关键代码,传参
            },
            remove: function (task) {
                $('.ImgUpload').find("input[type=hidden]").val("");
            },
            complete: function (task) {
                if (task.state != Uploader.COMPLETE)
                    return log(task.name + ": " + Uploader.getStatusText(task.state) + "!");
                var json = task.json;
                if (!json)
                    return log(task.name + ": 服务器未返回正确的数据!<br />");
                var obj = eval('(' + task.response + ')');
                $('.ImgUpload').find("input[type=hidden]").val(WebSite + obj.Url);
                $("#myimage").html("<img id=\"preImg\" src=\"" + WebSite + obj.Url + "\" border=\"0\" height=\"80\" width=\"120\" ></img><a href=\"#\" title=\"删除\" class=\"remove\">X</a>");
                $(".ImgUpload").hide();
            }
        }
    });

    uploader.start();      
}

由于页面加载时进行初始化,所以data不能写在url后,否则data的值为空,所以在add添加之前触发处获取该值 this.data = { cusfolder: $("#SiteUrl").val() };

 类似资料: