zoukankan      html  css  js  c++  java
  • 前台 图片上传 上传预览 调用上传服务(多张图片展示)

    function openBrowse(){
    var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false;
    if(ie){
    document.getElementById("file").click();
    document.getElementById("filename").value=document.getElementById("file").value;
    }else{
    var a=document.createEvent("MouseEvents");
    a.initEvent("click", true, true);
    document.getElementById("file").dispatchEvent(a);
    }
    }

    function setImagePreview() {
    if($('div[id="localImag"]').length>5){
    alert("最多只能上传5张图片!");
    return;
    }
    var uploadSrc = "";
    $.ajaxFileUpload({
    async : false,
    url : "${ctx}/xxxx/xxx/xxx",
    secureuri : false,
    fileElementId :['file'],
    dataType : 'text',
    success : function(data) {
    uploadSrc = $(data).text();
    if(uploadSrc == '' || uploadSrc.indexOf("错误") > -1){
    $('#pic').show();
    $('#nameImage').val('');
    $('#preview').attr('src',uploadSrc);
    $("#preview").css('display','none');
    $("#localImag").css('display','none');

    $('#cancelButton').hide();
    return true;
    }else{
    $('#pic').hide();
    $("#preview").css('display','block');
    $("#localImag").css('display','block');
    $('#cancelButton').show();
    }

    var docObj = document.getElementById("file");
    var imgObjPreview = document.getElementById("preview");
    if (docObj.files && docObj.files[0]) {
    //火狐下,直接设img属性
    imgObjPreview.style.display = 'block';
    imgObjPreview.style.width = '200px';
    imgObjPreview.style.height = '150px';
    //imgObjPreview.src = docObj.files[0].getAsDataURL();
    //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
    imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

    } else {

    //IE下,使用滤镜
    docObj.select();
    var imgSrc = uploadSrc;
    var localImagId = document.getElementById("localImag");
    //必须设置初始大小
    localImagId.style.width = "200px";
    localImagId.style.height = "150px";

    //图片异常的捕捉,防止用户修改后缀来伪造图片
    try {

    $(localImagId).find('#preview').attr('src',imgSrc);
    $('p[name="notShow"]').hide();
    $('p').append(localImagId);
    $(localImagId).append('<input type="hidden" name="picUrl" id="picUrl"/>');
    $(localImagId).find('#picUrl').attr('value',imgSrc);
    $('input[id="nameImage"]').attr('value','');
    $("#preview").css('display','block');
    } catch (e) {
    alert("您上传的图片格式不正确,请重新选择!");
    return false;
    }
    }

    $("#nameImage").val(uploadSrc);
    $('#nameImage').attr("readonly","readonly")//将input元素设置为readonly
    },
    error : function(data) {
    alert(data);
    }
    });
    return true;
    }

    //点黑色的x 关掉当前的图片

    function checkClose(element){
            var parentElement =element.parentNode;
                if(parentElement){
                      parentElement.remove(element);
                 }
            }

    ================================================

    <input type=file name="fileUpload" id="file" onchange="javascript:setImagePreview(this);" style="display:none">

    <li><label>奖&nbsp;品&nbsp;&nbsp;图:</label>
    <form:input id="nameImage" name="nameImage" path="picUrl" htmlEscape="false" maxlength="500" readonly="true" class="required" />
    <label id="pic" for="pic" class="error" style="diplay:none">图片类型必须是.gif,jpeg,jpg,bmp中的一种</label>
    <input type="button" name="button" style="margin-bottom: 0px;" onclick="javascript:openBrowse(this);" value="上传图片"/>
    <!-- <input type="button" id="cancelButton" name="button" style="margin-bottom: 0px;diplay:none" onclick="javascript:cancelBrowse();" value="取消上传"/> -->
    <span class="help-inline"><font color="red">*</font> </span>
    <p style="diplay:none" name="notShow"><div id="localImag" class="localImags"><div class='clo' onClick='javascript:checkClose(this);'></div><img id="preview" style="diplay:none" /></div></p></li>

  • 相关阅读:
    安装高版本的docker
    Apache JMeter汉化手册
    安装python包
    Jmeter Cluster
    doc下设置永久环境变量的好方法
    jmeter非常好的博客收藏
    mysql-学习链接
    python 脚本
    常见python快捷键
    2015年心情随笔--周围太烦躁,我想静静
  • 原文地址:https://www.cnblogs.com/austinspark-jessylu/p/6137059.html
Copyright © 2011-2022 走看看