uploadify怎么使用: http://www.uploadify.com/documentation/uploadify/implementing-uploadify/
demo地址: http://www.uploadify.com/demos/
文档在此: http://www.uploadify.com/documentation/
很多东西都可以定制,非常不错~~~
先贴一段代码大概瞅瞅:
<table width="50%"> <tr> <td><span name="file_upload" id="file_upload"></span></td> <td><input type="button" id="startBtn" name="startBtn" value="开始上传" onclick="startUpload(this)"></td> <td><input type="button" value="清除上传信息" onclick="document.getElementById('resultDiv').innerHTML=''"></td> </tr> </table> <div id="queueDiv"></div> <br>上传信息: <div id="resultDiv"> </div> </div> <script> $(function() { $('#file_upload').uploadify({ 'auto' : false, 'buttonClass' : '', 'buttonText' : '选择照片....', 'height' : 30, 'fileTypeDesc' : 'Image Files', 'fileTypeExts' : '*.gif; *.jpg; *.png; *.bmp', 'fileSizeLimit' : '<%=upFileSize%>B', 'swf' : 'flashUpload/uploadify.swf', 'uploader' : '<%=sFormAction%>', 'formData' : { 'albumID' : '0' }, 'queueID' : 'queueDiv', 'removeCompleted' : true, 'removeTimeout' : 5, 'onQueueComplete' : function(queueData) { document.getElementById("startBtn").value="开始上传"; uploadStart = false; $('#file_upload').uploadify('disable', false); }, 'onUploadSuccess' : function(file, data, response) { writeUploadResult(data); } }); });
var uploadStart = false; function startUpload(btn){ if(!uploadStart){ var obj = document.getElementById("albumID"); var albumID = obj.options[obj.selectedIndex].value; if(albumID==""){ alert("请先选择相册。"); return; } if($(".uploadify-queue-item").length==0){ alert("请选择照片。"); return; } uploadStart = true; btn.value="停止上传" $("#file_upload").uploadify("settings", "formData", {'albumID':albumID}); $('#file_upload').uploadify('disable', true); $('#file_upload').uploadify('upload','*'); }else{ uploadStart = false; btn.value="开始上传" $('#file_upload').uploadify('disable', false); $('#file_upload').uploadify('stop'); } } //从返回的HTML中提取信息文字. function writeUploadResult(responseStr){ var reg= /\[信息\].*?<br>/gi; var arrMactches = responseStr.match(reg); if(arrMactches!=null){ for (var i=0;i < arrMactches.length ; i++){ document.getElementById("resultDiv").innerHTML +=arrMactches[i]; } } } //----选中相册-------- var obj=document.getElementById("albumID"); for(var i=0;i<obj.options.length;i++){ if(obj.options[i].value=="<%=albumID%>"){ obj.options[i].selected=true; break; } } </script>
(1)'auto': false,选择文件后不自动上传。
(2)'buttonText' : '选择照片....',按钮上的文字
(3)'fileSizeLimit' : '1024B',单个文件的大小限制,超过时不会添加到队列里。
(4)'queueID' : 'queueDiv',队列内容添加到的容器ID,默认会自动创建一个,紧跟着按钮后面。
(5)'removeCompleted' : true,上传完成后,隔几秒就自动从队列中删除。
(6)$("#file_upload").uploadify("settings", "formData", {'albumID':albumID}); 设置表单项目,多个话,格式如{'albumID':albumID,'xxxxID':xxxID} 就是JSON的形式。
(7)$('#file_upload').uploadify('upload','*');上传队列中所有文件。
(8)uploadify上传文件时,文字编码使用的是UTF-8编码。 所以,服务端需要用utf-8编码对文字内容解码。 如使用无组件上传类,需要把里面的charset="gb2312"之类的换成utf-8~~ aspupload的话,可以用upload.codepage=65001,upload是组件对象名。
(9)服务端的返回信息也要用UTF-8编码,否则客户端会看到乱码。 response.charset="UTF-8" response.codepage=65001
|