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();
            })
 }