jQuery插件uploadify实现ajax效果的图片上传(2)

.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">&nbsp;</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; }

接着我们来完成一般处理时间的文件,代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzsfdx.html