Uploadify télécharger le fichier method_javascript skills-js tutoriel-php.cn

Uploadify télécharger le fichier method_javascript skills

WBOY

Libérer： 2016-05-16 15:10:32

original

1557 Les gens l'ont consulté

Uploadify est un plug-in de téléchargement pour JQuery. Il obtient de très bons résultats et affiche la progression. Cependant, l'exemple officiellement fourni est la version PHP. Cet article présentera en détail l'utilisation de Uploadify dans Aspnet. Vous pouvez également cliquer sur le lien ci-dessous pour une démonstration ou un téléchargement.

Laissez-moi d'abord vous montrer les rendus :

Modification :

Il a signalé que le fichier uploadify-cancel.png était introuvable. Recherchez uploadify.css, recherchez .uploadify-queue-item .cancel a { et modifiez le chemin du fichier.
De nombreuses personnes disent que lors de l'utilisation de uploadify sur Chrome et Firefox, la session ne peut pas être obtenue, ce qui entraîne des erreurs de téléchargement. Vous devez ajouter manuellement la méthode d'identification de session aux paramètres. Mais je ne l’ai pas fait ici, et il n’y a eu aucun problème pour le télécharger dans Chrome et Firefox. Je ne sais pas pourquoi, c’est peut-être parce que j’utilise la dernière version.

Points clés :

La configuration js de uploadify est relativement complète et certaines méthodes et attributs peuvent être supprimés de manière appropriée lors de l'utilisation réelle.

Dans des circonstances normales, seuls onSelect, onUploadError et onUploadSuccess peuvent être pris en compte pour le téléchargement d'un seul fichier.

S'il s'agit d'un téléchargement multi-fichiers, en plus du téléchargement d'un seul fichier, ajoutez onQueueComplete pour surveiller toute la file d'attente.

Commencez à télécharger tous les fichiers : $('#file_upload').uploadify('upload', '*');

Annuler le téléchargement : $('#file_upload').uploadify('cancel', parm);

parm est vide : Annulez le téléchargement du premier fichier.

parm est '*' : annule tous les fichiers téléchargés.

parm est l'identifiant du fichier : annulez le fichier correspondant à l'identifiant du fichier.

Modifiez quelques variables supplémentaires : $('#file_upload').uploadify("settings","formData",{"name1":"Nom chinois","parm1":"Paramètres modifiés"}); json. Si une variable dans le json existe déjà, écrasez l'attribut. Sinon, ajoutez l'attribut.
Le codage des paramètres côté serveur est : upload.setHeaderEncoding("UTF-8");, de sorte que le nom du fichier analysé soit en chinois normal. Cependant, les variables supplémentaires analysées sont tronquées en chinois, nous effectuons donc un transcodage ici (j'ai toujours l'impression que le transcodage est relativement faible et je ne sais pas où la configuration est erronée). new String(item.getString().getBytes("iso8859-1"),"utf-8")

Le serveur renvoie enfin le chemin de sauvegarde du fichier (vous pouvez définir ici le contenu de retour à votre guise).

Étapes :

Configurer le téléchargement

<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();%>
<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="<%=basePath %>">
<title></title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="uploadify/uploadify/jquery.uploadify.min.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify/uploadify.css" />
</head>
<script>
$(function(){
$(function() {
$(function() {
$('#file_upload').uploadify({
'uploader' : '<%=basePath%>/UploadServlet',//服务端地址
'swf' : 'uploadify/uploadify/uploadify.swf',
'buttonImage' : 'uploadify/uploadify/img/chooseFile.jpg',//重载按钮图片
'buttonClass' : 'some-class',//重载按钮样式
'height':19,//按钮宽度和高度
'width':76,
'queueID' : 'file_queue',//显示文件队列的一个div，在页面定义
'formData' : {'parm1':'参数1','year':'2016'},//附加参数，可以在upload参数中更改
'buttonText':'选择文件',//按钮显示文字，如果有图片的话，会被图片挡住
'fileSizeLimit':'1MB',//文件最大
'auto':false,//自动提交
'fileTypeExts' : '*.gif; *.jpg; *.png',//文件类型
'fileTypeDesc' : '只能上传图片',//选择文件的时候的提示信息
'multi' : true,//多选
'queueSizeLimit' : 3,//队列中文件的个数
'onSelect' : function(file) {
console.log(file);
alert("选择文件：" + file.name + "\n类型="+file.type+"\n大小="+file.size);
if(file.size>1024000){//文件太大，取消上传该文件
alert("文件大小超过限制！");
$('#file_upload').uploadify('cancel',file.id);
}
},
'onUploadSuccess' : function(file, data, response) {
alert('每个文件上传成功后触发 ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
},
'onUploadComplete' : function(file) {
alert('每个文件上传完成，无论对错都触发！ ' + file.name + ' finished processing.');
},
'onUploadError' : function(file, errorCode, errorMsg, errorString) {
alert('上传出错 ' + file.name + ' could not be uploaded: ' + errorString);
},
'onQueueComplete':function(queueData){
alert("队列中的所有文件上传完成后触发。
"+queueData.uploadsSuccessful+'\n'+queueData.uploadsErrored)
},
});
});
});
});
function upload(){
$('#file_upload').uploadify("settings","formData",{"name1":"中文name","parm1":"修改后的参数"});
$('#file_upload').uploadify('upload', '*');//上传所有文件
}
function cancel(){
$('#file_upload').uploadify('cancel', '*');//取消所有文件
}
function destroy(){
alert("取消upload上传，变成原来样式！");
$('#file_upload').uploadify('destroy');//destory
}
</script>
<body>
<div class="easyui-panel" title="说明" style="margin-bottom:15px">
</div>
<div class="easyui-panel" style="text-align:center;margin-bottom:15px">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="upload()">开始上传</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancel()">取消上传</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="destroy()">destroy</a>
<input type="file" name="file_upload" id="file_upload" />
<div id="file_queue" style="width:400px;height:10px;position:absolute;z-index:999"></div>
</div>
</body>
</html>

Copier après la connexion

Serveur

package com.servlet;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
* Servlet implementation class UploadServlet
*/
@WebServlet(name="UploadServlet",urlPatterns="/UploadServlet")
public class UploadServlet extends HttpServlet {
private static final long serialVersionUID = -6483558339095298703L;
/**
* @see HttpServlet#HttpServlet()
*/
public UploadServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("获取session，可以根据这个session进行一些其他的判断" + request.getSession().getId());
SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMdd");
String remotePath = File.separator + "download" + File.separator + sdf.format(new Date()) + File.separator;
String savePath = remotePath;
File dfile = new File(savePath);
if (!dfile.exists()) {
dfile.mkdirs();
}
DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding("UTF-8");
List<FileItem> fileList = null;
try {
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
return;
}
Iterator<FileItem> it = fileList.iterator();
String name = "";
String extName = "";
while (it.hasNext()) {
FileItem item = it.next();
if (!item.isFormField()) {
name = item.getName();
long size = item.getSize();
String type = item.getContentType();
System.out.println("文件=" + name + " " + size + " " + type);
if (name == null || name.trim().equals("")) {
continue;
}
// 扩展名格式：
if (name.lastIndexOf(".") >= 0) {
extName = name.substring(name.lastIndexOf("."));
}
File file = null;
do {
// 生成文件名：
name = UUID.randomUUID().toString();
file = new File(savePath + name + extName);
} while (file.exists());
File saveFile = new File(savePath + name + extName);
try {
item.write(saveFile);
} catch (Exception e) {
e.printStackTrace();
}
}else if(item.isFormField()){
System.out.println("表单内容：" + item.getFieldName() + "=" + new String(item.getString().getBytes("iso8859-1"),"utf-8"));
}
}
String requestPath = remotePath + name + extName;
request.getSession().setAttribute(requestPath, requestPath);
response.getWriter().write(savePath + name + extName);
}
}

Copier après la connexion