uploadify图片上传配置

参考：http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html

官网地址：http://www.uploadify.com/

附件下载地址：http://files.cnblogs.com/files/miskis/uploadify.zip

引用js、css

    <link rel="stylesheet" href="/assets/uploadify/uploadify.css">
    <link rel="stylesheet" href="/assets/css/iconfont.css">
    
    <script src="/assets/jquery-1.11.1.min.js"></script>
    <script src="/assets/uploadify/jquery.uploadify.js" ></script>
    <script src="/assets/uploadify/jquery.uploadify.defaultOpt.js" ></script>

html

<div id="js_showImgs" ></div>
<input type="file" name="uploadify" id="uploadify" />

js代码

$("#uploadify").uploadify($.extend(true,defaultOptions,{
    uploader: 'http://172.16.81.52:7080/web/file/uploadImage',  // 服务器处理地址
    swf: '/assets/uploadify/uploadify.swf',
    buttonText: "选择文件",                  //按钮文字
    height: 34,                             //按钮高度
    width: 82,                              //按钮宽度
    fileTypeExts: "*.jpg;*.png;",           //允许的文件类型
    fileTypeDesc: "请选择图片文件",           //文件说明   
    formData: { "imageFile": "imageFile" }, //提交给服务器端的参数
    fileObjName: 'imageFile',
    fileSizeLimit: '2MB', //文件大小，它接受一个单位（B，KB，MB或GB）。默认单位为KB。你可以设置这个值为0表示不限制。
    uploadLimit: 1,//图片张数限制
    onUploadSuccess: function (file, data, response) {   //一个文件上传成功后的响应事件处理
    var fileData = $.parseJSON(data);
    //组装图片地址
    var imgurl="http://172.16.81.52:81/"+ fileData.data.originalUrl;
    AddImage(imgurl,"uploadify-img","js_showImgs",0);
    }
     }));

/*********************
* 图片预览
* imgUrl 图片路径
* imgName 图片隐藏域id
* renderTo 图片预览追加位置id
* index 用于多图片时修改div的class
**********************/
 window.AddImage=function(imgUrl, imgName, renderTo, index){
             index++;
            var imgItem = '<div class="album-image  album-image'+index+'" >' +
                '        <div style="height:120px;">' +
                '       <input type="hidden" id="'+imgName+'"   value="' + imgUrl + '"/>' +
                '            <img src="' +  imgUrl + '" >' +
                '        </div>' +
                '    <div class="album-tools" title="删除图片">' +
                '        <span class="image-options text-right">' +
                '            <i class="icon iconfont icon-shanchu" ></i>' +
                '        </span>' +
                '        <div class="clearfix"></div>'+
            '    </div>' +
            '    </div>';
            $("#"+renderTo).append(imgItem);
            //移除预览图片
            $("#"+renderTo).find(".album-tools").click(function(){
                //获取上传文件的属性
                var    data = $('#uploadify').data('uploadify');
                var   settings = data.settings;
                //获取当前设置的上传文件数限制
                 var uploadLimit=settings.uploadLimit;
                 //重置上传限制
                 $('#uploadify').uploadify('settings','uploadLimit', ++uploadLimit);
                //移除图片元素
                $("#"+renderTo).find(".album-image"+index+"").remove();
            })
 }

 

转载于:https://www.cnblogs.com/miskis/p/6474320.html