JSP 이미지 파일 리사이즈

개발/코딩 2017. 5. 24. 13:23

이미지를 받는데 파일 용량이 커서 서버 용량에 부담을 줘서 알게된 방법이다.

 

-

<form name="frmSearch" method="post" action="db처리할 경로" enctype="multipart/form-data"  target="PopFrame" onSubmit="return opningReception()">

<input type="file" name ="agent1" >

<input type="submit" name="sbm" value=" 등 록 " class="btn1">

</form>

 

//하나의 form이 있다고 가정합니다.

//등록 버튼을 누를 경우에 multipart로 파일을 서버에 올리게 됩니다.

 

//아래는 back단 작업입니다.

 

<%@ page import="java.util.*, java.net.*, spacenet.func, java.io.*"%>
<%@ page import="spacenet.util.MultipartRequest" %>

<%@ page import="java.awt.geom.AffineTransform"%>
<%@ page import="java.awt.image.BufferedImage"%>
<%@ page import="java.awt.image.AffineTransformOp"%>
<%@ page import="javax.imageio.ImageIO"%>

<%!

 protected void ThumbNail(File image, String convFile) throws Exception
 {

   String destFileName = convFile;
  try
  {
   int wSize = 0, hSize=0;
   BufferedImage bufferedImage = ImageIO.read(image);
   int imageWidth = bufferedImage.getWidth();
   int imageHeight = bufferedImage.getHeight();

   int componentWidth = 0;
   int componentHeight = 0;

   if(imageWidth >=  imageHeight )
   {
    wSize = 700;

    if(imageWidth > wSize )
    {
     componentWidth = wSize;
     componentHeight = (int)Math.round(imageHeight * (wSize / componentWidth));
    }
    else
    {
     componentWidth = imageWidth;
     componentHeight = imageHeight;
    }
   }
   else
   {
    hSize = 700;

    if(imageHeight > hSize )
    {
     componentHeight = hSize;
     componentWidth = (int)Math.round(imageWidth * (hSize / componentHeight));
    }
    else
    {
     componentWidth = imageWidth;
     componentHeight = imageHeight;
    }
   }

   double scale = -1;

   if(true)
   {
    double heightScale = ((double)componentWidth) / ((double)imageWidth);
    int scaledHeight = (int)(((double)imageHeight) * heightScale);
    double widthScale = ((double)componentHeight) / ((double)imageHeight);
    int scaledWidth = (int)(((double)imageWidth) * widthScale);
    if ( scaledWidth <= componentWidth ) scale = widthScale;
    else scale = heightScale;
   }
   // Now create thumbnail
   AffineTransform affineTransform = AffineTransform.getScaleInstance(scale,scale);
   AffineTransformOp affineTransformOp = new AffineTransformOp(affineTransform, null);
   BufferedImage scaledBufferedImage = affineTransformOp.filter(bufferedImage,null);

   // Now do fix to get rid of silly spurious line

   int scaledWidth = scaledBufferedImage.getWidth();
   int scaledHeight = scaledBufferedImage.getHeight();

   int expectedWidth = (int)(imageWidth * scale);
   int expectedHeight = (int)(imageHeight * scale);
   if ( scaledWidth > expectedWidth || scaledHeight > expectedHeight )
   {
    scaledBufferedImage = scaledBufferedImage.getSubimage(0,0,expectedWidth,expectedHeight);
   }
   ImageIO.write(scaledBufferedImage,"PNG", new File(destFileName));

  }
  catch (Exception ee)
  {
   throw ee;
  }

 }

%>

 

int sizeLimite = 100 * 1024 * 1024; // 업로드 된 파일 용량이 100M로 지정

MultipartRequest Mrequest = new MultipartRequest(request, "/data/File/", sizeLimite);

//데이터를 저장할 경로("/data/File/")와 용량 리미트를 정해 줍니다.

//제가 작업할때 sizeLimite 를 지정 안해주면 10M 로 되더군요.

 

String agent1 =  UTF_8(func.NVL(Mrequest.getFilesystemName("agent1"))); //이미지

File reFile_1 =null;

reFile_1 = Mrequest.getFile("agent1");

ThumbNail(reFile_1, dir+Mrequest.getFilesystemName("agent1"));

 

//이런식으로 ThumbNail 호출 하면 이미지 크기가 정해진대로 조정 되면서 용량이 줄더군요.

 

//참고로

//파일 이름을 바꾸려면

 

reFile_1.renameTo( new File(dir + File.separator + 바꿀이름) );

 

//이런식으로 해주면 됩니다.

 

//아래는 MultipartRequest의 자바 소스 입니다.

 

 

import java.io.*;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.*;
import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.lang.SecurityException;
import org.apache.log4j.Category;

public class MultipartRequest extends HttpServlet {

    private static final int DEFAULT_MAX_POST_SIZE = 1024 * 10240;  // 10 Meg
    private static final String NO_FILE = "unknown";
    private static int FILE_NO = 1;
    private static Category logs = Category.getInstance(MultipartRequest.class.getName());

    private HttpServletRequest req;
    //private HttpServletResponse res;
    private File dir;
    private int maxSize;

    private Hashtable parameters = new Hashtable();  // name - Vector of values
    private Hashtable files = new Hashtable();       // name - UploadedFile
//Hashtable 클래스
//키(key)와 값(value)의 쌍으로 이루어진 요소(element)를 저장하는 자료구조
//생성자 Hashtable() Hashtable(int size) Hashtable(int size, float fillRatio) size :
//생성될 Hashtable 객체의 크기 fillRatio : 0.0-1.0사이의 값으로 load factor로 사용.
//즉 해쉬 테이블의 크기보다 저장될 요소가 많을 경우 fillRatio로 지정된 값이 키값에 곱해져서 사용되게 된다


    public MultipartRequest(HttpServletRequest request,
                            String saveDirectory) throws IOException {
        this(request, saveDirectory, DEFAULT_MAX_POST_SIZE);
    }

    //maxPostSize 는 파일크기를 미리설정 해놓는다.
    public MultipartRequest(HttpServletRequest request,
                            String saveDirectory,
                            int maxPostSize) throws IOException {
        // Sanity check values
        FILE_NO = 1;
        if (request == null)
            throw new IllegalArgumentException("request cannot be null");
        if (saveDirectory == null)
            throw new IllegalArgumentException("saveDirectory cannot be null");
        if (maxPostSize <= 0) {
            throw new IllegalArgumentException("maxPostSize must be positive");
        }

        // Save the request, dir, and max size
        req = request;

        dir = new File(saveDirectory);  //저장할 디렉토리 경로 c:/Program Files/Apache Group/Apache/htdocs/uploadfiles

        maxSize = maxPostSize;

        // Check saveDirectory is truly a directory
        if (!dir.isDirectory())  //isDirectory() 는 저장할 디렉토리가 있다면 true 없다면 false 반환
            throw new IllegalArgumentException("Not a directory: " + saveDirectory);

        // Check saveDirectory is writable
        if (!dir.canWrite()) // canWrite()는 이 디렉토리가 쓰기 기능이 가능한지 조사 한다.
            throw new IllegalArgumentException("Not writable: " + saveDirectory);

        // Now parse the request saving data to "parameters" and "files";
        // write the file contents to the saveDirectory

        //try{
        readRequest();

        //}catch(IOException e){
        //res.sendRedirect("http://211.235.250.230/file_error.jsp");
        //}

    }


    public MultipartRequest(ServletRequest request,
                            String saveDirectory) throws IOException {
        this((HttpServletRequest)request, saveDirectory);
    }


    public MultipartRequest(ServletRequest request,
                            String saveDirectory,
                            int maxPostSize) throws IOException {
        this((HttpServletRequest)request, saveDirectory, maxPostSize);
    }


    public Enumeration getParameterNames() {
        return parameters.keys();
    }


    public Enumeration getFileNames() {
        return files.keys();
    }

    public int getFileSize(){    //파일 크기
        return this.req.getContentLength();
    }


    public String getParameter(String name) {
        try {
            Vector values = (Vector)parameters.get(name);
            if (values == null || values.size() == 0) {
                return null;
            }
            String value = (String)values.elementAt(values.size() - 1);
            return value;
        }
        catch (Exception e) {
            return null;
        }
    }

    public String getRemoteAddr(){
        return this.req.getRemoteAddr();
    }

    public String[] getParameterValues(String name) {
        try {
            Vector values = (Vector)parameters.get(name);
            if (values == null || values.size() == 0) {
                return null;
            }
            String[] valuesArray = new String[values.size()];
            values.copyInto(valuesArray);
            return valuesArray;
        }
        catch (Exception e) {
            return null;
        }
    }


    public String getFilesystemName(String name) {
        try {
            UploadedFile file = (UploadedFile)files.get(name);
            return file.getFilesystemName();  // may be null
        }
        catch (Exception e) {
            return null;
        }
    }


    public String getContentType(String name) {
        try {
            UploadedFile file = (UploadedFile)files.get(name);
            return file.getContentType();  // may be null
        }
        catch (Exception e) {
            return null;
        }
    }


    public File getFile(String name) {
        try {
            UploadedFile file = (UploadedFile)files.get(name);
            return file.getFile();  // may be null
        }
        catch (Exception e) {
            return null;
        }
    }

    String getFileExtention(String fileName){


        String extension = "";

        int i = fileName.lastIndexOf('.');
        int p = Math.max(fileName.lastIndexOf('/'), fileName.lastIndexOf('\\'));

        if (i > p) {
            extension = fileName.substring(i+1);
        }
        return  extension;
    }

    String getFileNameWithoutExtention(String fileName){


        String ret = "";

        int i = fileName.lastIndexOf('.');
        if(i>=0)
            ret = fileName.substring(0,i);
        return  ret;
    }

    protected void readRequest() throws IOException {
        // Check the content type to make sure it's "multipart/form-data"
        // Access header directly to work around WebSphere 2.x oddity
        String type = req.getHeader("Content-Type");
        if (type == null ||
                !type.toLowerCase().startsWith("multipart/form-data")) {
            throw new IOException("Posted content type isn't multipart/form-data");
        }

        // Check the content length to prevent denial of service attacks
        int length = req.getContentLength();
        if (length > maxSize) {
            throw new IOException("Posted content length of " + length +
                    " exceeds limit of " + maxSize);
        }

        // Get the boundary string; it's included in the content type.
        // Should look something like "------------------------12012133613061"
        String boundary = extractBoundary(type);
        if (boundary == null) {
            throw new IOException("Separation boundary was not specified");
        }

        // Construct the special input stream we'll read from
        MultipartInputStreamHandler in =
                new MultipartInputStreamHandler(req.getInputStream(), length);

        // Read the first line, should be the first boundary
        String line = in.readLine();
        if (line == null) {
            throw new IOException("Corrupt form data: premature ending");
        }

        // Verify that the line is the boundary
        if (!line.startsWith(boundary)) {
            throw new IOException("Corrupt form data: no leading boundary");
        }

        // Now that we're just beyond the first boundary, loop over each part
        boolean done = false;
        while (!done) {
            done = readNextPart(in, boundary);
        }
    }


    protected boolean readNextPart(MultipartInputStreamHandler in,
                                   String boundary) throws IOException {
        // Read the first line, should look like this:
        // content-disposition: form-data; name="field1"; filename="file1.txt"
        String line = in.readLine();
        if (line == null) {
            // No parts left, we're done
            return true;
        }
        else if (line.length() == 0) {
            // IE4 on Mac sends an empty line at the end; treat that as the end.
            // Thanks to Daniel Lemire and Henri Tourigny for this fix.
            return true;
        }

        // Parse the content-disposition line
        String[] dispInfo = extractDispositionInfo(line);
        String disposition = dispInfo[0];
        String name = dispInfo[1];
        String filename = dispInfo[2];

        // Now onto the next line.  This will either be empty
        // or contain a Content-Type and then an empty line.
        line = in.readLine();
        if (line == null) {
            // No parts left, we're done
            return true;
        }

        // Get the content type, or null if none specified
        String contentType = extractContentType(line);
        if (contentType != null) {
            // Eat the empty line
            line = in.readLine();
            if (line == null || line.length() > 0) {  // line should be empty
                throw new
                        IOException("Malformed line after content type: " + line);
            }
        }
        else {
            // Assume a default content type
            contentType = "application/octet-stream";
        }

        // Now, finally, we read the content (end after reading the boundary)
        if (filename == null) {
            // This is a parameter, add it to the vector of values
            String value = readParameter(in, boundary);
            if (value.equals("")) {
                value = null;  // treat empty strings like nulls
            }
            Vector existingValues = (Vector)parameters.get(name);
            if (existingValues == null) {
                existingValues = new Vector();
                parameters.put(name, existingValues);
            }
            existingValues.addElement(value);
        }
        else {
            // This is a file
            DateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");

// Get the date today using Calendar object.
            Date today = Calendar.getInstance().getTime();
            String currentTime =  df.format(today);
            filename = getFileNameWithoutExtention(filename)+"_"+currentTime+"_"+FILE_NO+"."+getFileExtention(filename);
            FILE_NO++;
            System.out.println("para name:"+name + "    original file name:"+filename);
            readAndSaveFile(in, boundary, filename);
            if (filename.equals(NO_FILE)) {
                files.put(name, new UploadedFile(null, null, null));
            }
            else {
                files.put(name,
                        new UploadedFile(dir.toString(), toKo(filename), contentType));
            }
        }
        return false;  // there's more to read
    }

    /**
     * A utility method that reads a single part of the multipart request
     * that represents a parameter.  A subclass can override this method
     * for a better optimized or differently behaved implementation.
     *
     * @param in the stream from which to read the parameter information
     * @param boundary the boundary signifying the end of this part
     * @return the parameter value
     * @exception IOException if there's a problem reading or parsing the
     * request
     */
    protected String readParameter(MultipartInputStreamHandler in,
                                   String boundary) throws IOException {
        StringBuffer sbuf = new StringBuffer();
        String line;

        while ((line = in.readLine()) != null) {
            if (line.startsWith(boundary)) break;
            sbuf.append(line + "\r\n");  // add the \r\n in case there are many lines
        }

        if (sbuf.length() == 0) {
            return null;  // nothing read
        }

        sbuf.setLength(sbuf.length() - 2);  // cut off the last line's \r\n
        return sbuf.toString();  // no URL decoding needed
    }

    /**
     * A utility method that reads a single part of the multipart request
     * that represents a file, and saves the file to the given directory.
     * A subclass can override this method for a better optimized or
     * differently behaved implementation.
     *
     * @param in the stream from which to read the file
     * @param boundary the boundary signifying the end of this part
     * @param dir the directory in which to save the uploaded file
     * @param filename the name under which to save the uploaded file
     * @exception IOException if there's a problem reading or parsing the
     * request
     */
    protected void readAndSaveFile(MultipartInputStreamHandler in,
                                   String boundary,
                                   String filename) throws IOException {
        OutputStream os = null;
        // A filename of NO_FILE means no file was sent, so just read to the
        // next boundary and ignore the empty contents
        if (filename.equals(NO_FILE)) {
            os = new ByteArrayOutputStream();  // write to nowhere
        }
        // A real file's contents are written to disk
        else {
            File f = new File(dir + File.separator + toKo(filename));
            ////////추가 된 부분 ////////////////////////////////////////////////////////////////////////////////////
/* file anme 증가부분 막았음 by jekim
  int i = 1;
  int indexDot = toKo(filename).indexOf('.');
  String strFileHead = toKo(filename);
  String strFileExt = "";

  while(f.isFile()){
   if (indexDot !=  -1){
    strFileHead = toKo(filename).substring(0, indexDot);
    strFileExt = toKo(filename).substring(indexDot);
   }

   f = new File(dir + File.separator + strFileHead + i + strFileExt);
   i++;
  }
*/
            ////////////////////////////////////////////////////////////////////////////////////////////////////////////
            os = new FileOutputStream(f);
        }

        BufferedOutputStream out = new BufferedOutputStream(os, 8 * 1024); // 8K

        byte[] bbuf = new byte[100 * 1024];  // 100K
        int result;
        String line;

        // ServletInputStream.readLine() has the annoying habit of
        // adding a \r\n to the end of the last line.
        // Since we want a byte-for-byte transfer, we have to cut those chars.
        boolean rnflag = false;
        while ((result = in.readLine(bbuf, 0, bbuf.length)) != -1) {
            // Check for boundary
            if (result > 2 && bbuf[0] == '-' && bbuf[1] == '-') { // quick pre-check
                line = new String(bbuf, 0, result, "ISO-8859-1");
                if (line.startsWith(boundary)) break;
            }
            // Are we supposed to write \r\n for the last iteration?
            if (rnflag) {
                out.write('\r'); out.write('\n');
                rnflag = false;
            }
            // Write the buffer, postpone any ending \r\n
            if (result >= 2 &&
                    bbuf[result - 2] == '\r' &&
                    bbuf[result - 1] == '\n') {
                out.write(bbuf, 0, result - 2);  // skip the last 2 chars
                rnflag = true;  // make a note to write them on the next iteration
            }
            else {
                out.write(bbuf, 0, result);
            }
        }
        out.flush();
        out.close();
        os.close();
    }


    //한글 입력을 위한 메소드를 구현합니다.
    public static String toKo(String str){
        try{
            if(str == null) return null;
            return new String (str.getBytes("8859_1"),"KSC5601");
        }//try 닫기
        catch(UnsupportedEncodingException ex){
            ex.printStackTrace();
            return "";
        }//chatch 닫기


    }//toKo닫기

    // Extracts and returns the boundary token from a line.
    //
    private String extractBoundary(String line) {
        // Use lastIndexOf() because IE 4.01 on Win98 has been known to send the
        // "boundary=" string multiple times.  Thanks to David Wall for this fix.
        int index = line.lastIndexOf("boundary=");
        if (index == -1) {
            return null;
        }
        String boundary = line.substring(index + 9);  // 9 for "boundary="

        // The real boundary is always preceeded by an extra "--"
        boundary = "--" + boundary;

        return boundary;
    }

    // Extracts and returns disposition info from a line, as a String array
    // with elements: disposition, name, filename.  Throws an IOException
    // if the line is malformatted.
    //
    private String[] extractDispositionInfo(String line) throws IOException {
//logs.debug("MultipartRequest line : "+line);
        // Return the line's data as an array: disposition, name, filename
        String[] retval = new String[3];

        // Convert the line to a lowercase string without the ending \r\n
        // Keep the original line for error messages and for variable names.
        String origline = line;
        line = origline.toLowerCase();

        // Get the content disposition, should be "form-data"
        int start = line.indexOf("content-disposition: ");
        int end = line.indexOf(";");
        if (start == -1 || end == -1) {
            throw new IOException("Content disposition corrupt: " + origline);
        }
        String disposition = line.substring(start + 21, end);
        if (!disposition.equals("form-data")) {
            throw new IOException("Invalid content disposition: " + disposition);
        }

        // Get the field name
        start = line.indexOf("name=\"", end);  // start at last semicolon
        end = line.indexOf("\"", start + 7);   // skip name=\"
        if (start == -1 || end == -1) {
            throw new IOException("Content disposition corrupt: " + origline);
        }
        String name = origline.substring(start + 6, end);

        // Get the filename, if given
        String filename = null;
        start = line.indexOf("filename=\"", end + 2);  // start after name
        end = line.indexOf("\"", start + 10);          // skip filename=\"
        if (start != -1 && end != -1) {                // note the !=
            filename = origline.substring(start + 10, end);
            // The filename may contain a full path.  Cut to just the filename.
            int slash =
                    Math.max(filename.lastIndexOf('/'), filename.lastIndexOf('\\'));
            if (slash > -1) {
                filename = filename.substring(slash + 1);  // past last slash
            }
            if (filename.equals("")) filename = NO_FILE; // sanity check
        }

        // Return a String array: disposition, name, filename
        retval[0] = disposition;
        retval[1] = name;
        retval[2] = filename;
        return retval;
    }

    // Extracts and returns the content type from a line, or null if the
    // line was empty.  Throws an IOException if the line is malformatted.
    //
    private String extractContentType(String line) throws IOException {
        String contentType = null;

        // Convert the line to a lowercase string
        String origline = line;
        line = origline.toLowerCase();

        // Get the content type, if any
        if (line.startsWith("content-type")) {
            int start = line.indexOf(" ");
            if (start == -1) {
                throw new IOException("Content type corrupt: " + origline);
            }
            contentType = line.substring(start + 1);
        }
        else if (line.length() != 0) {  // no content type, so should be empty
            throw new IOException("Malformed line after disposition: " + origline);
        }

        return contentType;
    }
}

 

 

 


// A class to hold information about an uploaded file.
//업로드된  파일에 대한 정보를 잡는 클래스.
class UploadedFile {

    private String dir;
    private String filename;
    private String type;

    UploadedFile(String dir, String filename, String type) {
        this.dir = dir;
        this.filename = filename;
        this.type = type;
    }

    public String getContentType() {
        return type;
    }

    public String getFilesystemName() {
        return filename;
    }

    public File getFile() {
        if (dir == null || filename == null) {
            return null;
        }
        else {
            return new File(dir + File.separator + filename);
        }
    }
}


// A class to aid in reading multipart/form-data from a ServletInputStream.
// It keeps track of how many bytes have been read and detects when the
// Content-Length limit has been reached.  This is necessary since some
// servlet engines are slow to notice the end of stream.
//
// Mac users: The Mac doesn't like class names which exceed 32 characters
// (including the ".class") so while this class is usable from a JAR
// anywhere, it won't compile on a Mac.
//
class MultipartInputStreamHandler {

    ServletInputStream in;
    int totalExpected;
    int totalRead = 0;
    byte[] buf = new byte[8 * 1024];

    public MultipartInputStreamHandler(ServletInputStream in,
                                       int totalExpected) {
        this.in = in;
        this.totalExpected = totalExpected;
    }

    // Reads the next line of input.  Returns null to indicate the end
    // of stream.
    //
    public String readLine() throws IOException {
        StringBuffer sbuf = new StringBuffer();
        int result;
        String line;

        do {
            result = this.readLine(buf, 0, buf.length);  // this.readLine() does +=
            if (result != -1) {
                sbuf.append(new String(buf, 0, result, "ISO-8859-1"));
            }
        } while (result == buf.length);  // loop only if the buffer was filled

        if (sbuf.length() == 0) {
            return null;  // nothing read, must be at the end of stream
        }

        sbuf.setLength(sbuf.length() - 2);  // cut off the trailing \r\n
        return sbuf.toString();
    }

    // A pass-through to ServletInputStream.readLine() that keeps track
    // of how many bytes have been read and stops reading when the
    // Content-Length limit has been reached.
    //
    public int readLine(byte b[], int off, int len) throws IOException {
        if (totalRead >= totalExpected) {
            return -1;
        }
        else {
            int result = in.readLine(b, off, len);
            if (result > 0) {
                totalRead += result;
            }
            return result;
        }
    }
}

 

아이디 입력시 특수문자 확인

개발/코딩 2017. 4. 20. 13:50

하나의 폼이 있다고 가정합니다.

 

<form name="frmChk" method="post" action="자신페이지">

<input type="text" name = "userId">

</form>

 

<input type="button" onClick="javascript:gogogo()"value="클릭">

 

버튼을 클릭해봅니다

 

<script>

function gogogo()

{

var re = /[-!%^@]/gi; //특수문자 정규식 변수 선언. [ ]안에 특수문자를 넣습니다.

if(re.test(document.userId.value))
 {
     alert("아이디에 특수문자가 들어갈 수 없습니다.");
     frm.userid.focus();
     return false;
 }

}

</script>

 

이런식으로 하면 될 것 같습니다.

'개발 > 코딩' 카테고리의 다른 글

특정 화면 위치로 자동 스크롤  (0) 2017.06.05
JSP 이미지 파일 리사이즈  (0) 2017.05.24
JSP 드래그, 오른쪽 클릭 막기  (0) 2017.01.25
메뉴 클릭하면 이미지 변경  (0) 2016.03.21
url로 파일 다운로드  (0) 2015.03.12

JSP 드래그, 오른쪽 클릭 막기

개발/코딩 2017. 1. 25. 11:51

body 부분에 추가해주면 됩니다.

 

<body oncontextmenu="return false" ondragstart="return false">

 

 

 oncontextmenu="return false"  -> 오른쪽 클릭 막기

 ondragstart="return false" -> 드래그 막기

 

 

간단하네요

'개발 > 코딩' 카테고리의 다른 글

JSP 이미지 파일 리사이즈  (0) 2017.05.24
아이디 입력시 특수문자 확인  (0) 2017.04.20
메뉴 클릭하면 이미지 변경  (0) 2016.03.21
url로 파일 다운로드  (0) 2015.03.12
JSON 파싱 사용하기  (0) 2015.03.12

jQuery - select box 선택값 가져오기

개발/jQuery 2017. 1. 18. 15:53

[jquery] select  box 선택값 가져오기


// select box ID로 접근하여 선택된 값 읽기
$("#셀렉트박스ID option:selected").val();

// select box Name로 접근하여 선택된 값 읽기
$("select[name=셀렉트박스name]").val();

// 같은 방식으로 span과 같은 다른 태그도 접근 가능하다~
$("span[name=셀렉트박스name]").text();

// 선택된 값의 index를 불러오기
var index = $("#셀렉트박스ID option").index($("#셀렉트박스ID option:selected"));

// 셀렉트 박스에 option값 추가하기
$("#셀렉트박스ID").append("<option value='1'>1번</option>");

// 셀렉트 박스 option의 맨앞에 추가 할 경우
$("#셀렉트박스ID").prepend("<option value='0'>0번</option>");

// 셀렉트 박스의 html 전체를 변경할 경우
$("#셀렉트박스ID").html("<option value='1'>1차</option><option value='2'>2차</option>");

// 셀렉트 박스의 index별로 replace를 할 경우
// 해당 객체를 가져오게 되면, option이 다수가 되므로 배열 객체가 되어 eq에 index를 넣어 개별 개체를 선택할 수 있다.
$("#셀렉트박스ID option:eq(1)").replaceWith("<option value='1'>1차</option>");

// 직접 index 값을 주어 selected 속성 주기
$("#셀렉트ID option:eq(1)").attr("selected", "selected");

// text 값으로 selected 속성 주기
$("#셀렉트ID")val("1번").attr("selected", "selected");

// value 값으로 selected 속성 주기
$("#셀렉트ID").val("1");

// 해당 index item 삭제하기
$("#셀렉트ID option:eq(0)").remove();

// 첫번째, 마지막 item 삭제하기
$("#셀렉트ID option:first").remove();
$("#셀렉트ID option:last").remove();

// 선택된 옵션의 text, value 구하기
$("#셀렉트ID option:selected").text();
$("#셀렉트ID option:selected").val();

// 선택된 옵션의 index 구하기
$("#셀렉트ID option").index($("#셀렉트ID option:selected"));

// 셀렉트박스의 아이템 갯수 구하기
$("#셀렉트ID option").size();

// 선택된 옵션 전까지의 item 갯수 구하기
$("#셀렉트ID option:selected").prevAll().size();

// 선택된 옵션 후의 item 갯수 구하기
$("#셀렉트ID option:selected").nextAll().size();

// 해당 index item 이후에 option item 추가 하기
$("#셀렉트ID option:eq(0)").after("<option value='3'>3번</option>");

// 해당 index item 전에 option item 추가하기
$("#셀렉트ID option:eq(3)").before("<option value='2'>2번</option>");

// 해당 셀렉트 박스에 change event binding 하기
$("#selectID").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});


[jquery] select  box 선택값 가져오기



출처: http://oingbong.tistory.com/175 [Oing]

'개발 > jQuery' 카테고리의 다른 글

대표적인 getter 메소드와 setter 메소드  (0) 2017.07.12
input 요소 선택  (0) 2017.07.12
jQuery 선택자  (0) 2017.07.12
비슷한 ID 가져오기  (0) 2017.07.07
jQuery - serialize()란? 사용방법  (0) 2017.01.18

jQuery - serialize()란? 사용방법

개발/jQuery 2017. 1. 18. 15:05

-serialize() 입력된 모든Element(을)를 문자열의 데이터에 serialize 한다-

 

serialize()를 이용하면 파라미터  전달 시에

fname=값&femail=값&sex=값&job=값 이렇게 안해줘도 된다.


1. serialize()를 사용하지 않고 파라미터값을  전달시

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<form name="formname1" id="formname1" style="margin:0px;">
<div>
    <label for="name">이름</label>
        :
    <input type="text" name="fname" id="fname" value="C.m.A" />
</div>
 <div>
    <label for="email">이메일</label>
    :
    <input type="text" name="femail" id="femail" value="" />
</div>
<div>
    <label for="sex">성별</label>
    :
    <input type="radio" name="sex" value="0" />여자
    <input type="radio" name="sex" value="1" />남자
 </div>
<div>
    <label for="job">직업</label>
    :
    <select name="job" id="job">
    <option value="직업1">직업1</option>
    <option value="직업2">직업2</option>
    <option value="직업3">직업3</option>
    </select>
 </div>
</form>

 

라고 했을때 serialize()를 사용하지 않고 파라미터값을  전달시
 
fname=값&femail=값&sex=값&job=값
또는
var params = {
    fname       : '값',
    femail : '값',
    sex    : '값',
    job : '값'
};

 

 

2. serialize() 사용하기

 

var params = jQuery("#폼명").serialize() 또는 var params = $("#폼명").serialize()

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script>
function formSubmit() {
    var params = jQuery("#formname1").serialize();   

 // serialize() : 입력된 모든Element(을)를 문자열의 데이터에 serialize 한다.

    jQuery.ajax({
        url: '샘플ajax.php',
        type: 'POST',
        data:params,
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        dataType: 'html',
        success: function (result) {
            if (result){
                // 데이타 성공일때 이벤트 작성
            }
        }
    });
}
</script>
 
<form name="formname1" id="formname1" style="margin:0px;">
<div>
    <label for="fname">이름</label>
        :
    <input type="text" name="fname" id="fname" value="C.m.A" />
</div>
 <div>
    <label for="femail">이메일</label>
    :
    <input type="text" name="femail" id="femail" value="" />
</div>
<div>
    <label for="sex">성별</label>
    :
    <input type="radio" name="sex" value="0" />여자
    <input type="radio" name="sex" value="1" checked="checked" />남자
 </div>
<div>
    <label for="job">직업</label>
    :
    <select name="job" id="job">
    <option value="직업1">직업1</option>
    <option value="직업2">직업2</option>
    <option value="직업3">직업3</option>
    </select>
 </div>
<div>
       <input type="button" value="Ajax 폼 전송" onclick="formSubmit()" />
 </div>
</form>

'개발 > jQuery' 카테고리의 다른 글

대표적인 getter 메소드와 setter 메소드  (0) 2017.07.12
input 요소 선택  (0) 2017.07.12
jQuery 선택자  (0) 2017.07.12
비슷한 ID 가져오기  (0) 2017.07.07
jQuery - select box 선택값 가져오기  (0) 2017.01.18

자바스크립트 날짜 계산

개발/실전 2016. 6. 20. 16:08

1. 날짜를 임의로 입력했을 경우 원하는 일수를 더해야 한다. (여기선 일수를 7일로 잡아 봅니다.)

2. 입력 받을 날짜 타입은 "YYYYMMDD" 로 가정합니다.

 

<form name="test"> <!-- 임의의 폼 -->

<input type="text" name="startDate" onkeyup="javascript:dateChk()"> <!-- 임의의 날짜를 입력 받아서 function 호출-->

<span id = endDate"></span><!-- 계산된 날짜가 나올 수 있는 부분 -->

</form>

 

<script>

function dateChk()

{

var frm = document.test;

var startDate = frm.startDate.value;

if(startDate.length == 8)    //입력 받은 날짜 길이가 8자리 이므로

{

startDate = new Date(startDate.substring(0,4),startDate.substring(4,6)-1,startDate.substring(6,8);  //년, 월, 일 형식으로 선언합니다.

//월에 -1을 해주는 이유는 6월을 넣었으면 스크립트는 0부터 시작하기때문에 5월로 인식한다.

 

startDate.setDate(startDate.getDate() + 7); //Date에 7을 더해줍니다

//마찬가지로 년도에 더할 경우 startDate.getFullYear() + 7을

//월에 더할 경우 startDate.getMont() + 7

endDate.innerHTML = startDate.getFullYear() + (startDate.getMonth()+(1*1) + startDate.getDate();

//위에서 선언한 span id 값에 표시를 해줍니다.

//월에 +1을 해주는 이유는 사람이 볼때 원상복구를 시키기 위해서

}

}

</script>

 

※ 날짜 받는 형식이 아래와 같다면 이렇게 처리 하면 됩니다.

var startDate= "2015-5-6";
var arr = startDate.split('-');
startDate = new Date(arr1[0], arr1[1], arr1[2]);

 

더보기 클릭 했을때

개발/실전 2016. 3. 30. 11:25

조건 : 화면에 3개의 이미지가 있다. '더보기' 버튼을 클릭하면 3개가 더 보여져야한다.

 

int listMore = 3;    //최초 3개의 이미지를 보여준다
int totalCnt = 9;    //DB 값에서 리스트의 갯수를 받아올 변수(여기선 9로 지정)

 

-- 화면에 보여질 내용 --

<div class="tbl_area" id="dispRow1>" style="display:none">내용</div>
<div class="tbl_area" id="dispRow2>" style="display:none">내용</div>
<div class="tbl_area" id="dispRow3>" style="display:none">내용</div>
.
.
.

<div class="tbl_area" id="dispRow<%=cnt%>" style="display:none">내용</div> //마지막은 dispRow9 가 된다.


<divid="dispMore" style="display:none">
 <a href="javascript:listMore('<%=totalCnt%>')">더보기</a>
</div>

-- 화면에 보여질 내용 END --


스크립트로 화면이 보여질때 실행 되도록 해준다

<script>
<%
 for (int i=1;i<=totalCnt;i++) //totalCnt 리스트의 최대 갯수만큼 실행 (3번)
 {
      if (i<=listMore)
      {
%>
          document.getElementById("dispRow<%=i%>").style.display = 'block'; //최대 갯수 보다 작거나 같으면 이미지를 보여준다
<%
      }
 }
 if (totalCnt > listMore) //listMore은 현재 화면에 보여주는 이미지 갯수
 {
%>
  document.getElementById("dispMore").style.display = 'block'; //최대갯수보다 화면에 보여주는 이미지 갯수보다 작으면 더보기 버튼을 보여준다
<%
 }
%>
</script>

 

<script>

  function listMore(totalCnt) //더보기 버튼을 눌렀을때 실행되는 함수
  {
   var listMore = document.frmSet.listMore.value; //현재 화면에 보여지는 리스트 갯수를 가져온다(3개)

   var last = Number(listMore) + 3; //더보기를 누르면 3개씩 추가 된다
   
   for (i=Number(listMore)+1;i<=totalCnt;i++) // i=(3+1) -> 최초3개만 보여주니까 다음부턴 4부터 6까지; 4보다 최대 갯수가 같거나 클때 까지; i= 4++
   {
    if (i<=last) // i가 6보다 작거나 같을경우
    {
     document.getElementById("dispRow"+i).style.display = 'block'; //dispRow6 까지 block 처리를 한다
    }
   }
   document.frmSet.listMore.value = last;

   if (totalCnt <= last)
   {
    document.getElementById("dispMore").style.display = 'none'; //더보기 버튼이 최대갯수보다 크거나 작으면 none 처리
   }
  }

</script>

메뉴 클릭하면 이미지 변경

개발/코딩 2016. 3. 21. 16:20

라디오 버튼 등 이벤트를 발생 시키면 이미지를 변경하고자 했을 때.

<img id="imgUsim" src="이미지.png">

최초 기본 이미지를 설정한다.( id 값을 설정해준다 )

<input name="comType" type="radio" value="A" onClick="javascript:chgUsim(A);"/>

<input name="comType" type="radio" value="B" onClick="javascript:chgUsim(B);"/>

두개의 라디오 버튼을 만들어 준뒤 클릭하면 함수를 불러온다

 function chgUsim(comType)
 {
  var comType = comType;
  if(comType == "A")
  {
   document.getElementById("imgUsim").src="A.png";
  }
  else if(comType =="B")
  {
   document.getElementById("imgUsim").src="B.jpg";
  }
 }

함수 불렀을때 값에 따라서 id값의 이미지를 변경해준다.

'개발 > 코딩' 카테고리의 다른 글

아이디 입력시 특수문자 확인  (0) 2017.04.20
JSP 드래그, 오른쪽 클릭 막기  (0) 2017.01.25
url로 파일 다운로드  (0) 2015.03.12
JSON 파싱 사용하기  (0) 2015.03.12
session을 통해 값넘기기  (0) 2014.06.11

자바 세마포어( JAVA Semaphore )

개발/이론 2015. 12. 29. 17:36

- 프로세스간 메세지 전송을 하거나, 혹은 공유메모리를 통해서 특정 data를 공유하게 될경우

   발생하는 문제는, 공유된 자원에 여러개의 프로세스가 동시에 접근을 하면서 발생한다. 

   단지 한번에 하나의 프로세스만 접근 가능하도록 만들어 줘야 하고,

   이때 세마포어를 쓴다.

 

- 쓰레드에서는 뮤텍스, 프로세스에서는 세마포어

- 교착상태

 

 

A 프로세스가 k 에 접근하고 나오면 k = 2 라는 값을 예상할수 있다.

   A 프로세스가 k 에 접근했을때, B 프로세스가 k 에 접근을 하고 일을 하고 나오면, k = 2 가 되고,

   A 프로세스가 그후로 일을 하면 k = 3 이 된다.

   즉, 예상한 값을 얻을수 없다.

   이를 방지 하기 위해,

   A 프로세스가 접근 했을때 다른 프로세스의 접근을 막고,

   끝난후 접근을 풀어 준다.

   이를 세마포어로 접근을 막고 접근을 허용 할수 있다.   

 

- 차단을 원하는 자원에 대해서 semaphore를 생성하면 해당자원을 가리키는

   semaphore 값이 할당 된다.

   이 값이 0 이면 해당자원에 접근할수 없고,

              0 보다 크면 해당자원에 접근할수 있다.

 

 

-  그러므로, 자원에 접근하기 전에 semaphore 값을 검사해서

   값이 0이면 자원을 사용할수 있을때까지 기다리고,

   0보다 더 크면 자원에 접근해서 semaphore 값을 0 으로 감소 시켜서,

   다른 프로세스가 자원에 접근 할수 없도록 하고,

   자원의 사용이 끝나면 다시 semaphore 값을 증가 시켜 다른프로세스가 사용할수 있게 해준다.

 

 

 

 

 

 

==== 세마포어 예제 ===

 

package mvnoServer;
import java.util.concurrent.Semaphore;


public class semaphoer_test
{
 public static void main(String[] args)
 {
  Semaphore se = new Semaphore(3);
  SyncMulti th1 = new SyncMulti(se,"1");
  SyncMulti th2 = new SyncMulti(se,"2");
  SyncMulti th3 = new SyncMulti(se,"3");
  SyncMulti th4 = new SyncMulti(se,"4");
  
  th1.start();
  th2.start();
  th3.start();
  th4.start();
  
 }
}
-----------------------------------------------

 

package mvnoServer;
import java.util.concurrent.Semaphore;


public class SyncMulti extends Thread
{

 // 동시에 수행될 수 있는 스레드의 개수를 설정 하는 클래스


 Semaphore sem;
 String msg;
 public SyncMulti(Semaphore sem, String msg)
 {
  super();
  this.sem = sem;
  this.msg = msg;
 }
 public void run()
 {
  try
  {
   sem.acquire(); //실행한다.
   System.out.println(msg);
   Thread.sleep(5000);  //5초간 딜레이
   sem.release(); //끊어준다

  //세마포어를 실행시키고 5초 후에는 세마포어를 끊어준다.
  }
  catch(Exception e)
  {
   
  }
 }
}
=================================================

결과값.

1,2,3 이 시작되고, 5초 후에 4가 실행된다.

 

 

 

 

 

 

 

'개발 > 이론' 카테고리의 다른 글

MVC 1, MVC 2 차이  (0) 2017.12.06
자바 Referenced Libraries 만들기  (0) 2013.10.08
9월 11일  (0) 2013.09.12
9월 9일  (0) 2013.09.12

오라클 REGEXP_LIKE

개발/DB 2015. 12. 16. 09:31

오라클에서 여러 개의 단어를 LIKE로 검색하기 위해서는 동적 쿼리를 사용하거나 LIKEOR로 묶어서 사용했다.  

Oracle 10g부터 정규식 함수가 추가 되었으며 그 중에서 REGEXP_LIKE 함수를 사용하여 다중 검색을 쉽게 할 수 있게 되었다.

 

검색할 단어를 파이프(|)로 연결하여 하나의 문자열로 만든 후 사용하면 된다.

 

 

 

SELECT *
   FROM TABLE
 WHERE REGEXP_LIKE(TEXT, 'A | B | C')

'개발 > DB' 카테고리의 다른 글

MySQL database, data 복사하기  (0) 2020.03.25
Clob 타입을 varchar2 타입으로  (0) 2018.02.14
ORA-00054 에러  (0) 2015.11.25
해당 컬럼이 있는 테이블 찾기  (0) 2015.09.14
테이블 정보 조회  (0) 2015.01.16