Rumah > Artikel > hujung hadapan web > Muat naik muat naik fail kaedah_kemahiran javascript
Muat naik muat naik fail kaedah_kemahiran javascript
- WBOYasal
- 2016-05-16 15:10:321571semak imbas
Uploadify ialah pemalam muat naik untuk JQuery Ia mencapai hasil yang sangat baik dan memaparkan kemajuan. Walau bagaimanapun, contoh yang disediakan secara rasmi ialah versi PHP Artikel ini akan memperkenalkan penggunaan Uploadify dalam Aspnet secara terperinci Anda juga boleh mengklik pautan di bawah untuk demonstrasi atau muat turun.
Biar saya tunjukkan rendering dahulu:
Pengubahsuaian:
Ia melaporkan bahawa fail uploadify-cancel.png tidak ditemui. Cari uploadify.css, cari .uploadify-queue-item .batalkan {, dan ubah suai laluan fail.
Ramai orang mengatakan bahawa apabila menggunakan uploadify pada chrome dan Firefox, sesi tidak dapat diperoleh, mengakibatkan ralat muat naik. Anda perlu menambah kaedah id sesi secara manual pada parameter. Tetapi saya tidak melakukannya di sini, dan tiada masalah memuat naiknya dalam Chrome dan Firefox. Saya tidak tahu mengapa, mungkin kerana saya menggunakan versi terkini.
Isi penting:
Konfigurasi js bagi uploadify agak menyeluruh dan beberapa kaedah serta atribut boleh dipadamkan dengan sewajarnya semasa penggunaan sebenar.
Dalam keadaan biasa, hanya onSelect, onUploadError dan onUploadSuccess boleh dipertimbangkan untuk muat naik fail tunggal.
Jika ia ialah muat naik berbilang fail, maka sebagai tambahan kepada muat naik fail tunggal, tambahkan onQueueComplete untuk memantau keseluruhan baris gilir.
Mula memuat naik semua fail: $('#file_upload').uploadify('upload', '*');
Batalkan muat naik: $('#file_upload').uploadify('batal', parm);
parm kosong: Batalkan memuat naik fail pertama.
parm ialah '*': batalkan semua fail yang dimuat naik.
parm ialah id fail: Batalkan fail yang sepadan dengan id fail.
Ubah suai beberapa pembolehubah tambahan: $('#file_upload').uploadify("settings","formData",{"name1":"Chinese name","parm1":"Parameter diubah suai"}); json. Jika pembolehubah dalam json sudah wujud, kemudian tulis ganti atribut tersebut.
Pengekodan tetapan sisi pelayan ialah: upload.setHeaderEncoding("UTF-8");, supaya nama fail yang dihuraikan adalah bahasa Cina biasa. Walau bagaimanapun, pembolehubah tambahan yang dihuraikan adalah bercelaru dalam bahasa Cina, jadi kami melakukan transkoding di sini (saya sentiasa merasakan bahawa transcoding adalah agak rendah, dan saya tidak tahu di mana konfigurasi itu salah). new String(item.getString().getBytes("iso8859-1"),"utf-8")
Pelayan akhirnya mengembalikan laluan menyimpan fail (anda boleh menentukan kandungan pemulangan di sini sesuka anda).
Langkah:
Konfigurasikan muat naik
<%@ 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>
Pelayan
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);
}
}
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional