Java 如何在拖放html5中传递id_Java_Html_Jsp_Servlets

Java 如何在拖放html5中传递id

java html jsp servlets

Java 如何在拖放html5中传递id,java,html,jsp,servlets,Java,Html,Jsp,Servlets,index.jsp <!DOCTYPE html> <html lang="en"> <head> <title>HTML5 drag'n'drop file upload with Servlet</title> <script> window.onload = function() { var dropbox = docume

index.jsp

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>HTML5 drag'n'drop file upload with Servlet</title>
        <script>
            window.onload = function() {
                var dropbox = document.getElementById("dropbox");
                dropbox.addEventListener("dragenter", noop, false);
                dropbox.addEventListener("dragexit", noop, false);
                dropbox.addEventListener("dragover", noop, false);
                dropbox.addEventListener("drop", dropUpload, false);
            }

            function noop(event) {
                event.stopPropagation();
                event.preventDefault();
            }

            function dropUpload(event) {
                noop(event);
                var files = event.dataTransfer.files;

                for (var i = 0; i < files.length; i++) {
                    upload(files[i]);
                }
            }

            function upload(file) {
                document.getElementById("status").innerHTML = "Uploading " + file.name;

                var formData = new FormData();
                formData.append("file", file);

                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener("progress", uploadProgress, false);
                xhr.addEventListener("load", uploadComplete, false);
                xhr.open("POST", "uploadServlet", false); // If async=false, then you'll miss progress bar support.
                xhr.send(formData);
            }

            function uploadProgress(event) {
                // Note: doesn't work with async=false.
                var progress = Math.round(event.loaded / event.total * 100);
                document.getElementById("status").innerHTML = "Progress " + progress + "%";
            }

            function uploadComplete(event) {
                document.getElementById("status").innerHTML = event.target.responseText;
            }
        </script>
        <style>
            #dropbox {
                width: 300px;
                height: 200px;
                border: 1px solid gray;
                border-radius: 5px;
                padding: 5px;
                color: gray;
            }
        </style>
    </head>
    <body>
        <div id="dropbox">Drag and drop a file here...</div>
        <div id="status"></div>
    </body>
</html>


HTML5使用Servlet拖放文件上载
window.onload=函数（）{
var dropbox=document.getElementById（“dropbox”）；
dropbox.addEventListener（“dragenter”，noop，false）；
dropbox.addEventListener（“dragexit”，noop，false）；
dropbox.addEventListener（“dragover”，noop，false）；
dropbox.addEventListener（“drop”，dropUpload，false）；
}
功能noop（事件）{
event.stopPropagation（）；
event.preventDefault（）；
}
函数dropUpload（事件）{
noop（事件）；
var files=event.dataTransfer.files；
对于（var i=0；i


uploadServlet.java
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package officer;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.util.List;
import javax.servlet.ServletException;
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.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class uploadServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            // Apache Commons-Fileupload library classes
            DiskFileItemFactory factory = new DiskFileItemFactory();
            ServletFileUpload sfu  = new ServletFileUpload(factory);

            if (! ServletFileUpload.isMultipartContent(request)) {
                out.println("sorry. No file uploaded");
                return;
            }
            else
            {
            // parse request
            List items = sfu.parseRequest(request);

            FileItem file = (FileItem) items.get(0);
            String type=file.getContentType();
            float size=file.getSize()/1024;
            if((type.equals("image/jpeg"))&& ((size <201)&&(size>10)))
            {
            Class.forName("oracle.jdbc.driver.OracleDriver");
            Connection con = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe", "epolicia", "admin");
            con.setAutoCommit(false);
            PreparedStatement ps = con.prepareStatement("insert into image(image) values(?)");
            ps.setBinaryStream(1, file.getInputStream(), (int) file.getSize());
            ps.executeUpdate();
            con.commit();
            con.close();
            out.println("Proto Added Successfully. <p> <a href='ListPhotoServlet'>List Photos </a>");
            }
            else
            {
             out.print("Invalid Image Selected !!");
            }
            }
        }
        catch(Exception ex) {
            out.println( "Error --> " + ex.getMessage());
        }
    }
}

/*
*要更改此模板，请选择工具|模板
*然后在编辑器中打开模板。
*/
包装主任；
导入java.io.IOException；
导入java.io.PrintWriter；
导入java.sql.Connection；
导入java.sql.DriverManager；
导入java.sql.PreparedStatement；
导入java.util.List；
导入javax.servlet.ServletException；
导入javax.servlet.http.HttpServlet；
导入javax.servlet.http.HttpServletRequest；
导入javax.servlet.http.HttpServletResponse；
导入org.apache.commons.fileupload.FileItem；
导入org.apache.commons.fileupload.disk.DiskFileItemFactory；
导入org.apache.commons.fileupload.servlet.ServletFileUpload；
公共类uploadServlet扩展了HttpServlet{
受保护的void doPost（HttpServletRequest请求、HttpServletResponse响应）
抛出ServletException、IOException{
setContentType（“text/html；charset=UTF-8”）；
PrintWriter out=response.getWriter（）；
试一试{
//Apache Commons文件上载库类
DiskFileItemFactory=新的DiskFileItemFactory（）；
ServletFileUpload sfu=新ServletFileUpload（工厂）；
如果（！ServletFileUpload.isMultipartContent（请求））{
out.println（“对不起，没有上传文件”）；
返回；
}
其他的
{
//解析请求
列表项=sfu.parseRequest（请求）；
FileItem文件=（FileItem）items.get（0）；
字符串类型=file.getContentType（）；
float size=file.getSize（）/1024；
如果（（键入等于（“图像/jpeg”）&&（（大小10）））
{
类forName（“oracle.jdbc.driver.OracleDriver”）；
Connection con=DriverManager.getConnection（“jdbc:oracle:thin:@localhost:1521:xe”、“epolicia”、“admin”）；
con.setAutoCommit（假）；
PreparedStatement ps=con.prepareStatement（“插入图像（图像）值（？））；
ps.setBinaryStream（1，file.getInputStream（），（int）file.getSize（））；
ps.executeUpdate（）；
con.commit（）；
con.close（）；
out.println（“Proto添加成功，”；
}
其他的
{
out.print（“选择的图像无效！！”）；
}
}
}
捕获（例外情况除外）{
out.println（“错误-->”+ex.getMessage（））；
}
}
}

上面的代码只是简单地将图像插入数据库。但是，我想在userid
的基础上插入图像。那么，我应该在代码中更改什么呢。将图像放入框中时，需要帮助传递用户ID
。提前谢谢 我在Chrome浏览器中测试了这个。
在你的剧本中
formData.append("file", file);
// if userid is in your script
fd.append("userid", userid); 
// or if userid is at server, then send it to browser first
// fd.append("userid", <%=userid%>);

Iterator iter = items.iterator();
while (iter.hasNext()) {
    FileItem item = (FileItem) iter.next();
    if (item.isFormField()) {
        String userid = item.getString();
    else //its the file
 ...