web前端上传图片的几种方法

下面给你介绍3种web前端上传图片的方法：

1.表单上传

最传统的图片上传方式是form表单上传，使用form表单的input[type=”file”]控件，打开系统的文件选择对话框，从而达到选择文件并上传的目的。

form表单上传

表单上传需要注意以下几点：

(1).提供form表单，method必须是post。

(2).form表单的enctype必须是multipart/form-data。

(3).提供input type="file"上传输入域。

2.ajax上传

ajax和FormData可实现页面无刷新的文件上传效果，主要用到了jQuery的ajax()方裤态法和XMLHttpRequest Level 2的

FormData接口。通过FormData对象可以更灵活方岁纯腔便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit()方法传输的数据格式相同。

ajax无刷新上传

Ajax无刷新上传的方式，本质上与表单上传无异，只是把表单里的内容提出来采用ajax提交，并且由前端决定请求结果回传后的展示结果。

3.各类插件上传

当上传的需求要求可预览、显示上传进度、中断上传过程、大文件分片上传等等，这时传统的表单上传很难实现这些功能，我们可以借助现有插件完乎衫成。

如百度上传插件Web Uploader、jQuery图片预览插件imgPreview 、拖拽上传与图像预览插件Dropzone.js等等，大家可根据项目实际需求选择适合的插件。

java web开发中，使用文件 *** 作类来上传图片并读取，如下代码：

 * @desc: 图片处理工具

 * @author: bingye

 * @createTime: 2015-3-17 下午04:25:32

 * @version: v1.0

 */

public class ImageUtil {

 

    /**

    * 将图片写到客户端

    * @author: bingye

    * @createTime: 2015-3-17 下午04:36:04

    * @history:

    * @param image

    * @param response void

    */

    public static void writeImage(byte[] image,HttpServletResponse response){

        if(image==null){

            return

        }

        byte[] buffer=new byte[1024]

        InputStream is=null

        OutputStream os=null

        try {

            is=new ByteArrayInputStream(image)

            os=response.getOutputStream()

            while(is.read(buffer)!=-1){

                os.write(buffer)

                os.flush()

            }

        } catch (IOException e) {

            e.printStackTrace()

        } finally{

            try {

                if(is!=null){is.close()}

                if(os!=null){os.close()}

            } catch (IOException e) {

                e.printStackTrace()

            }

        }

    }

     

    /**

    * 获取指定路劲图片

    * @author: bingye

    * @createTime: 2015-3-21 上午10:50:44

    * @param filePath

    * @param response void

    */

    public static void writeImage(String filePath,HttpServletResponse response){

        File imageFile=new File(filePath) 

        if(imageFile!=null && imageFile.exists()){

            byte[] buffer=new byte[1024]

            InputStream is=null

            OutputStream os=null

            try {

                is=new FileInputStream(imageFile)

                os=response.getOutputStream()

                while(is.read(buffer)!=-1){

     腊散郑     轮颂          os.write(buffer)

                    os.flush()

                }

            } catch (FileNotFoundException e) {

                e.printStackTrace()

            } catch (IOException e) {

                e.printStackTrace()

            } finally{

                try {

                    if(is!=null){is.close()}

                    if(os!=null){os.close()}

                } catch (IOException e) {

                    e.printStackTrace()

                }

            }

        }

    }

     

    /**

    * 图片上传到文件夹

    * @author: bingye

    * @createTime: 2015-3-20 下午08:07:25

    * @param file

    * @param savePath

    * @return boolean

    */

    public static ResultDto uploadToLocal(CommonsMultipartFile file,String savePath){

        if(file!=null && !file.isEmpty()){

            //获取文件名称

            String fileName=file.getOriginalFilename()

            //获取后缀名

            String suffixName=fileName.substring(fileName.indexOf(".")+1)

            //新名称

            String newFileName=System.currentTimeMillis()+"."+suffixName

            //新文件路劲

            String filePath=savePath+newFileName

            //获取存储文件路径

            File fileDir=new File(savePath)

         掘孝   if(!fileDir.exists()){

                //如果文件夹没有：新建

                fileDir.mkdirs()

            }

            FileOutputStream fos=null

            try {

                fos=new FileOutputStream(filePath)

                fos.write(file.getBytes())

                fos.flush()

                return ResultUtil.success("UPLOAD_SUCCESS", URLEncoder.encode(newFileName,"utf-8"))

            } catch (Exception e) {

                e.printStackTrace()

                return ResultUtil.fail("UPLOAD_ERROR")

            } finally{

                try {

                    if(fos!=null){

                        fos.close()

                    }

                } catch (IOException e) {

                    e.printStackTrace()

                    return ResultUtil.fail("UPLOAD_ERROR")

                }

            }

        }

        return ResultUtil.fail("UPLOAD_ERROR")

    }

     

     

     

}

用jspSmartUpload组件亏友来实现，用jsp+servlet在Servlet里实现唤凯的代码：

PrintWriter out = response.getWriter()

int count = 0

// 实例化上传控件对象

SmartUpload su = new SmartUpload()

// 初始化 *** 作

su.initialize(config, request, response)

// 设置上传文件最大字节数

su.setTotalMaxFileSize(100000)

//

try {

//禁止上传指定扩展名的文件

su.setDeniedFilesList("ext,bat,jsp")

} catch (SQLException e1) {

e1.printStackTrace()

}

try {

// 上传文件到服务器

su.upload()

File fileup = new File(request.getRealPath("upload"))

if(!fileup.exists()){

// 创建目录

fileup.mkdir()

}

// 处理多个文件的上传

for(int i = 0i <su.getFiles().getCount()i++){

com.jspsmart.upload.File file = su.getFiles().getFile(i)

if(!file.isMissing()){ // 如果文件有效

// 保存文件到指定上传目录

file.saveAs("/upload/new."+file.getFileExt(), su.SAVE_VIRTUAL)

count = su.save("/upload")

}

}

} catch (SmartUploadException e) {

e.printStackTrace()

}

out.println(count +"file(s) uploaded")

如果你对这个上传组件不了解，最好是先去查查和空唤用法。。。

---