neatbeans用js实现图片预览上传(自动控制图片大小)

来源：互联网发布：韩国淘宝女模特排名编辑：程序博客网时间：2024/04/29 23:17

<?xml version="1.0" encoding="UTF-8"?>
<jsp:root version="1.2" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:ui="http://www.sun.com/web/ui">
 <jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>
 <f:view>
 <ui:page binding="#{department$Page1.page1}" id="page1">
 <ui:html binding="#{department$Page1.html1}" id="html1">
 <ui:head binding="#{department$Page1.head1}" id="head1">
 <ui:link binding="#{department$Page1.link1}" id="link1" url="/resources/stylesheet.css"/>
 <script language="javascript" type="text/javascript">
 var k =0;
 function yulan(){
 document.getElementById("form1:label1").innerHTML = "";
 var f = document.getElementById("form1:fileUpload1").value;
 var fileext=f.substring(f.lastIndexOf("."),f.length);
 fileext=fileext.toLowerCase();
 if((fileext!='.jpg') && (fileext!='.gif') && (fileext!='.jpeg') && (fileext!='.png') && (fileext!='.bmp')){
 document.getElementById("form1:label1").innerHTML="对不起，系统仅支持标准格式的照片，请您调整格式后重新上传";
 document.getElementById("form1:image1").className ="hidden";
 document.getElementById("form1:fileUpload1").focus();
 }
 else{
 if(k == 0){
 document.getElementById("form1:image1").attachEvent('onload',DrawImage);
 document.getElementById("form1:image1").attachEvent('onerror',checkImg);
 }
 document.getElementById("form1:image1").className = "";
 document.getElementById("form1:image1").src = f;
 if(document.getElementById("form1:label1").innerHTML == "")
 try{
 if(ShowFileSize(f) > 512.0){
 document.getElementById("form1:label1").innerHTML="上传文件最大不能超过512k";
 document.getElementById("form1:image1").className ="hidden";
 }
 }catch(err){
 document.getElementById("form1:label1").innerHTML="您的浏览器的安全级别过高";
 document.getElementById("form1:image1").className ="hidden";
 }
 k++;
 }
 }
 function DrawImage(){
 var image=new Image();
 var ImgD = new Image();
 ImgD=document.getElementById("form1:image1");
 image.src=ImgD.src;
 var w = 120;
 var h = 120;
 if(image.width>0 && image.height>0){
 if(image.width/image.height>= w/h){
 ImgD.width=w;
 ImgD.height=(image.height*w)/image.width;
 //ImgD.alt=ImgD.width+"×"+ImgD.height;
 }
 else{
 ImgD.height=h;
 ImgD.width=(image.width*h)/image.height;
 //ImgD.alt=ImgD.width+"×"+ImgD.height;
 }
 }
 }
 function checkImg(){
 document.getElementById("form1:label1").innerHTML="对不起，系统没有找到你需要上传的图片,请重新选择";
 document.getElementById("form1:image1").className ="hidden";
 }
 function ShowFileSize(FilePath){
 var fso = new ActiveXObject("Scripting.FileSystemObject");
 var file = fso.GetFile(FilePath);
 return (file.size/1024).toFixed(2);
 }
 function mOver(){
 document.getElementById("div1").style.visibility = "visible";
 document.getElementById("form1:image2").src = document.getElementById("form1:fileUpload1").value;
 }
 function mOut(){
 document.getElementById("div1").style.visibility = "hidden";
 document.getElementById("form1:image2").src = "";
 }
 </script>
 </ui:head>
 <ui:body binding="#{department$Page1.body1}" id="body1" style="-rave-layout: grid">
 <ui:form binding="#{department$Page1.form1}" id="form1">
 <ui:upload binding="#{department$Page1.fileUpload1}" id="fileUpload1" immediate="true" onChange="yulan()" style="left: 48px; top: 144px; position: absolute"/>
 <ui:button action="#{department$Page1.button1_action}" binding="#{department$Page1.button1}" id="button1"
 style="left: 71px; top: 72px; position: absolute" text="按钮"/>
 <ui:image onMouseOut="mOut()" onMouseOver="mOver()" binding="#{department$Page1.image1}" id="image1"
 style="left: 144px; top: 288px; position: absolute; width: 120px; heigth: 120.0px" visible="false"/>
 <ui:label binding="#{department$Page1.label1}" id="label1" style="color: #ff3333; height: 19px; left: 192px; top: 72px; position: absolute; width: 253px"/>
 <div id="div1" style="position: absolute; left: 312px; top: 288px;visibility:hidden;">
 <ui:image binding="#{department$Page1.image2}" id="image2" />
 </div>
 </ui:form>
 </ui:body>
 </ui:html>
 </ui:page>
 </f:view>
</jsp:root>

/*
* Page1.java
*
* Created on 2007年11月6日, 上午11:14
* Copyright Administrator
*/
package hrms.department;

import com.sun.rave.web.ui.appbase.AbstractPageBean;
import com.sun.rave.web.ui.component.Body;
import com.sun.rave.web.ui.component.Button;
import com.sun.rave.web.ui.component.Form;
import com.sun.rave.web.ui.component.Head;
import com.sun.rave.web.ui.component.Html;
import com.sun.rave.web.ui.component.ImageComponent;
import com.sun.rave.web.ui.component.Label;
import com.sun.rave.web.ui.component.Link;
import com.sun.rave.web.ui.component.Page;
import com.sun.rave.web.ui.component.TextField;
import com.sun.rave.web.ui.component.Upload;
import com.sun.rave.web.ui.model.UploadedFile;
import hrms.ApplicationBean1;
import hrms.RequestBean1;
import hrms.SessionBean1;
import java.io.File;
import javax.faces.FacesException;
import javax.servlet.ServletContext;

/**
* Page bean that corresponds to a similarly named JSP page. This
* class contains component definitions (and initialization code) for
* all components that you have defined on this page, as well as
* lifecycle methods and event handlers where you may add behavior
* to respond to incoming events.
*/
public class Page1 extends AbstractPageBean {
 // <editor-fold defaultstate="collapsed" desc="Managed Component Definition">
 private int __placeholder;

 /**
 * Automatically managed component initialization. WARNING:
 * This method is automatically generated, so any user-specified code inserted
 * here is subject to being replaced.
 */
 private void _init() throws Exception {
 }

 private Page page1 = new Page();

 public Page getPage1() {
 return page1;
 }

 public void setPage1(Page p) {
 this.page1 = p;
 }

 private Html html1 = new Html();

 public Html getHtml1() {
 return html1;
 }

 public void setHtml1(Html h) {
 this.html1 = h;
 }

 private Head head1 = new Head();

 public Head getHead1() {
 return head1;
 }

 public void setHead1(Head h) {
 this.head1 = h;
 }

 private Link link1 = new Link();

 public Link getLink1() {
 return link1;
 }

 public void setLink1(Link l) {
 this.link1 = l;
 }

 private Body body1 = new Body();

 public Body getBody1() {
 return body1;
 }

 public void setBody1(Body b) {
 this.body1 = b;
 }

 private Form form1 = new Form();

 public Form getForm1() {
 return form1;
 }

 public void setForm1(Form f) {
 this.form1 = f;
 }

private Upload fileUpload1 = new Upload();

    public Upload getFileUpload1() {
        return fileUpload1;
    }

    public void setFileUpload1(Upload u) {
        this.fileUpload1 = u;
    }

private Button button1 = new Button();

    public Button getButton1() {
        return button1;
    }

    public void setButton1(Button b) {
        this.button1 = b;
    }

private ImageComponent image1 = new ImageComponent();

    public ImageComponent getImage1() {
        return image1;
    }

    public void setImage1(ImageComponent ic) {
        this.image1 = ic;
    }

private Label label1 = new Label();

    public Label getLabel1() {
        return label1;
    }

public void setLabel1(Label l) {
 this.label1 = l;
 }

 // </editor-fold>

 /**
 * Construct a new Page bean instance.
 */
 public Page1() {
 }
 ServletContext theApplicationsServletContext =(ServletContext) this.getExternalContext().getContext();
 String realPath = theApplicationsServletContext.getRealPath("/upload/images");
 /**
 * Callback method that is called whenever a page is navigated to,
 * either directly via a URL, or indirectly via page navigation.
 * Customize this method to acquire resources that will be needed
 * for event handlers and lifecycle methods, whether or not this
 * page is performing post back processing.
 *
 * Note that, if the current request is a postback, the property
 * values of the components do not represent any
 * values submitted with this request. Instead, they represent the
 * property values that were saved for this view when it was rendered.
 */
 public void init() {
 // Perform initializations inherited from our superclass
 super.init();
 // Perform application initialization that must complete
 // *before* managed components are initialized
 // TODO - add your own initialiation code here

 // <editor-fold defaultstate="collapsed" desc="Managed Component Initialization">
 // Initialize automatically managed components
 // *Note* - this logic should NOT be modified
 try {
 _init();
 } catch (Exception e) {
 log("Page1 Initialization Failure", e);
 throw e instanceof FacesException ? (FacesException) e: new FacesException(e);
 }

 // </editor-fold>
 // Perform application initialization that must complete
 // *after* managed components are initialized
 // TODO - add your own initialization code here
 }

 /**
 * Callback method that is called after the component tree has been
 * restored, but before any event processing takes place. This method
 * will only be called on a postback request that
 * is processing a form submit. Customize this method to allocate
 * resources that will be required in your event handlers.
 */
 public void preprocess() {
 }

 /**
 * Callback method that is called just before rendering takes place.
 * This method will only be called for the page that
 * will actually be rendered (and not, for example, on a page that
 * handled a postback and then navigated to a different page). Customize
 * this method to allocate resources that will be required for rendering
 * this page.
 */
 public void prerender() {
 }

 /**
 * Callback method that is called after rendering is completed for
 * this request, if <code>init()</code> was called (regardless of whether
 * or not this was the page that was actually rendered). Customize this
 * method to release resources acquired in the <code>init()</code>,
 * <code>preprocess()</code>, or <code>prerender()</code> methods (or
 * acquired during execution of an event handler).
 */
 public void destroy() {
 }

/**
 * 返回对已限定范围的数据 Bean 的引用。
 */
 protected RequestBean1 getRequestBean1() {
 return (RequestBean1)getBean("RequestBean1");
 }

/**
 * 返回对已限定范围的数据 Bean 的引用。
 */
 protected ApplicationBean1 getApplicationBean1() {
 return (ApplicationBean1)getBean("ApplicationBean1");
 }

/**
 * 返回对已限定范围的数据 Bean 的引用。
 */
 protected SessionBean1 getSessionBean1() {
 return (SessionBean1)getBean("SessionBean1");
 }

    public String button1_action() {
        // 待做事项：处理按钮单击操作。返回的值是一个导航
        // 条件名称，如果它为 Null，则返回到同一页。
        try {
              if((String) this.label1.getText() != ""){
                  UploadedFile uploadedFile = fileUpload1.getUploadedFile();
                  String uploadedFileName = uploadedFile.getOriginalName();
                  int index = uploadedFileName.lastIndexOf('/');
                  String justFileName;
                  if( index >= 0){
                     justFileName = uploadedFileName.substring( index + 1 );
                  } else {
                      index = uploadedFileName.lastIndexOf('//');
                      //判断标记是否大于0
                      if (index >= 0) {
                           justFileName = uploadedFileName.substring( index + 1 );
                        } else {
                           justFileName = uploadedFileName;
                        }
                    }
                  File file1 = new File(realPath + File.separatorChar + justFileName);
                  uploadedFile.write(file1);
              }
        } catch (Exception ex) {
            ex.printStackTrace();
        }
        return null;
    }
}