.uploadify()
创建Uploadify上传组件的一个实例。
.uploadifyCancel()
从上传队列移除一个文件。如果文件正在上传,该方法将先取消上传,然后再将文件移除出上传队列。
.uploadifyClearQueue()
将所有文件移除出上传队列,并且取消正在执行的所有上传。
.uploadifySettings()
改变Uploadify组件的可选参数。
.uploadifyUpload()
触发上传。
这里会用到一些参数,但是我们并不需要完全的掌握这些参数,用之前看看有哪些参数,倒是自己会用哪些参数就ok。
由于时间有限,我把核心的代码先发出来,供大家参考:
在<head>标签中先应用css样式 <link href="https://www.jb51.net/Plugin/uploadify.css" type="text/css" />路径这里你的可能和我的不一样
接着再在<head>标签中应用js,js代码注意先后顺序,不然会报错。
<script type="text/javascript" src="https://www.jb51.net/js/jquery-1.4.2.min.js"></script> <script src="https://www.jb51.net/Plugin/swfobject.js" type="text/javascript"></script> <script src="https://www.jb51.net/Plugin/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>
同样这里路径是改成你自己的路径。uploaddiy是用jquery开发的,那我们就要先应用jquery才可以再使用uploaddiy所以要注意应用js的时候注意先后顺序
接着是核心的html代码
<tr> <th scope="row">图 片:</th> <td> <div> <input type="file" /> <%--上传时的进度条--%> </div> <div></div> <div> <a href="javascript:$('#uploadify').uploadifyUpload()"><span>上传</span></a> <a href="javascript:$('#uploadify').uploadifyClearQueue()"><span>取消上传</span></a> </div> </td> </tr> <tr> <th scope="row"> </th> <td><asp:Image runat="server" /></td> <%--成功上传生成图片预览功能--%> </tr>
写的时候写在form的table表中
接着我们开始完成控件给我们需要完成的接口代码如下:
//uploadify插件的自定义设置 $(document).ready(function () { $("#uploadify").uploadify({ 'uploader': '../Plugin/uploadify.swf', 'script': 'UploadImg.ashx', 'cancelImg': '../Plugin/cancel.png', 'folder': '../upload', 'buttonText': 'SELECT Pic', 'fileExt': '*.jpg;*.gif,*.png', //允许上传的文件格式为*.jpg,*.gif,*.png 'fileDesc': 'Web Image Files(.JPG,.GIF,.PNG)', //过滤掉除了*.jpg,*.gif,*.png的文件 'queueID': 'fileQueue', 'sizeLimit': '2048000', //最大允许的文件大小为2M 'auto': false, //需要手动的提交申请 'multi': false, //一次只允许上传一张图片 'onCancel': funCancel, //当用户取消上传时 'onComplete': funComplete, //完成上传任务 'OnError': funError //上传发生错误时 }); }); //用户取消函数 function funCancel(event, ID, fileObj, data) { jBox.tip('您取消了' + fileObj.name + '操作', 'info'); return; } //图片上传发生的事件 function funComplete(event, ID, fileObj, response, data) { //$("#pic").html('<img runat="server" src=https://www.jb51.net/upload/' + response + '.jpg/>'); if (response == 0) { jBox.tip('图片' + fileObj.name + '操作失败', 'info'); return; } $("#pic").attr("src", "https://www.jb51.net/upload/" + response).height(200).width(300); jBox.tip('图片' + fileObj.name + '操作成功', 'info'); return; } //上传发生错误时。 function funError(event, ID, fileObj, errorObj) { jBox.tip(errorObj.info); return; }
接着我们来完成一般处理时间的文件,代码如下: