利用uploadify进行ajax方式进行文件上传

 uploadify插件是一个前台功能提供的一个比较强大的插件，它基于jquery，能经过ajax进行上传，在上传的过程当中能够显示进度条，能够前台对文件大小，文件的格式等等进行校验，也可以展示一些比较绚丽的画面。具体详细能够查看官方的demo

一、官方地址：http://www.uploadify.com/

二、下载此js插件，而后把uploadify插件引入到项目中

<script src="<c:url value="/js/uploadify/swfobject.js"/>" type="text/javascript" charset="utf-8"></script>
    <script src="<c:url value="/js/uploadify/jquery.uploadify.v2.1.0.js"/>" type="text/javascript"              charset="utf-8">
</script>

三、定义file控件

 

<input type="file" id="frontfile" name="frontfile" />

四、设置上传事件

 

$(function (){
        $("#backfile").uploadify({
            'uploader': '/js/uploadify/uploadify.swf?v='+new Date(),
            'script': 'file_idRegisterUpbackfile.action;jsessionid=<%=session.getId()%>',
            'fileDataName': 'backfile', //此处是定义上传控件的id
            'cancelImg': 'js/jquery.uploadify-v2.1.0/cancel.png',
            'folder': 'UploadFile',
            'auto': true,
            'buttonImg' : '/p_w_picpaths/diyclaim/liulan_e.jpg',
            'height' : 25,
            'width' : 66,
            'fileDesc':'支持图片格式：jpg，jpeg', //点击上传，文件选择框中显示的文字
            'fileExt':'*.jpg;*.jpeg',
            'sizeLimit':2*1024*1024,
            'onError' : function(event, queueID, fileObj,errorObj){
                if(errorObj.type=='File Size')
                        errorObj.type='文件大小';
                alert("图片：" + fileObj.name + " 上传失败。错误信息："+errorObj.type+" 异常");
            },
           'onComplete': function (event, queueID, fileObj, response, data){
                        //这里面是回掉函数
                        var jsonData;
                        try{
                            jsonData=eval('(' + response + ')');
                        }catch(e){
                        }
                        showImage(jsonData.oldfileNameAndPath);//获得后台返回来的字符串

            }
        });
    });

以上是对此控件的粗略使用，

另外使用jquery.lightbox能够实现其余的比较绚的功能，例如能够展现一个图片的缩略图，而后鼠标点击之后能够在弹出层中看大图，而后经过拖动里面的条，能够把图片放大或者缩小等等，还请亲们自行研究。详细可见官方文档。