UpLoadFy上传图片
1、不显示上传进度
2、开始时上传按钮、取消上传按钮是不可用
3、当选择完要上传的文件后，上传、取消按钮可以用
4、上传完毕后上传按钮不可用
5、上传完毕后显示上传的图片
上传插件的引用
<!---上传插件--->
<script type="text/javascript" src="../UpLoadFy/swfobject.js"></script>
<script type="text/javascript" src="../UpLoadFy/jquery.uploadify.v2.1.0.min.js"></script>
<link rel="Stylesheet" type="text/css" href="../UpLoadFy/uploadify.css" />
实现代码：
$("#DoUpLoad,#DoCancel").button().attr({ "disabled": "disabled" }); $("#uploadify").uploadify({ 'uploader': '../UpLoadFy/uploadify.swf', 'script': '../UpLoadFy/FileUpLoad.ashx', 'cancelImg': '../UpLoadFy/cancel.png', 'folder': '../Photo', //要上传到的服务器路径，默认‘/’ 'queueID': 'fileQueue', 'auto': false, //选定文件后是否自动上传，默认false 'multi': false, //是否允许同时上传多文件，默认false 'fileDesc': '图片文件', //出现在上传对话框中的文件类型描述 'fileExt': '*.jpg;*.png;*.gif;', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc // 'sizeLimit': 5000, //控制上传文件的大小，单位byte // 'simUploadLimit': 5, //多文件上传时，同时上传文件数目限制 "onComplete": function (event, queueID, fileObj) { $("#ImgPhoto").attr("src", ".." + fileObj.filePath + "?temp = " + Date.parse(new Date())); $("#HasPhoto").html("true"); $("#DoUpLoad,#DoCancel").button().attr({ "disabled": "disabled" }); }, "onError": function (event, queueID, fileObj) { alert(fileObj.info); $("#HasPhoto").html("false"); }, "onSelect": function () { $("#DoUpLoad").attr("href", "javascript:$('#uploadify').uploadifyUpload()"); $("#DoCancel").attr("href", "javascript:$('#uploadify').uploadifyClearQueue()"); $("#DoUpLoad,#DoCancel").removeAttr("disabled") } });
aspx页面的代码 ：
<table> <tr> <td style="width: 100px; height: 100px; overflow: hidden;"> <img alt="" src="" id="ImgPhoto" style="width: 100px; height: 100px;" /> </td> </tr> <tr> <td> <input type="file" name="uploadify" id="uploadify" /> </td> </tr> <tr> <td> <a id="DoUpLoad">上传</a><a id="DoCancel"> 取消</a> </td> </tr> </table>
<div style="text-align: left; display: none;">
<div id="fileQueue">
</div>
</div>
uploadFy将其下载的插件内容放到UpLoadFy文件夹下如下图：
效果图：
