精华内容
下载资源
问答
  • ajax上传附件到服务器

    2016-11-08 17:00:07
    包含了ajax上传附件到服务器的前后台代码
  • ajax上传图片到服务器

    2019-04-26 08:59:38
    #使用ajax实现图片上传到服务器 限制条件(后端SSM,前端HTML5) ##牛逼的人勿看,以下代码仅供初学者参考 ##这只是很多种上传图片方式其中的一种 ###function为: (’’’) function tijiao(){ // var formTest = ...

    #使用ajax实现图片上传到服务器 限制条件(后端SSM,前端HTML5)
    ##牛逼的人勿看,以下代码仅供初学者参考
    ##这只是很多种上传图片方式其中的一种
    ###function为:
    (’’’)
    function tijiao(){
    //
    var formTest = document.getElementById(“formTest”);

    		//使用formdata直接提交表单
    		var formdata = new FormData(formTest);
    		
    		//如果除图片外还需要传其它参数,可以append追加
    		formdata.append('saruLruid',${saruLruid});
    		formdata.append('money',${money}) ;
    		formdata.append('productId',${productId});			
    		formdata.append('phone',${phone});
    		
    		//
    		  console.info(formdata);
    		  $.ajax({
    			type: "POST",
    			url:"../../../v6/mall/terminalShop/ajax.html",
    			 data : formdata,
    		     async: false,  //异步传输,必须加
    		     cache: false,  //必加
    		     contentType: false,  //必加
    		     processData: false,	
    			success: function(data){
    				
    			}
    		});  
    	 }
    

    (’’’)

    ###body代码为
    (’’’)

    选择图片 (''') ####*java代码为* (''') @RequestMapping("/ajax") public ModelAndView ajax(@RequestParam("file") MultipartFile formdata){ //可以打印出东西 System.err.println(formdata); return null;

    (’’’)
    #####一定要注意!!!!!
    @RequestParam(“file”)中的file要和input的name对应起来,否则后台会接不到,开发者工具会疯狂报400

    展开全文
  • Ajax上传图片到服务器

    2017-03-21 17:22:08
    Ajax上传图片到服务器 style="width: 70px;height:50px;">商品2color="red">*(220*280) style="width: 50px;text-align:left;height:50px;"> id="upload_second" class="fileupload" name="upload" ty

    Ajax上传图片到服务器


    <tr>
        <th style="width: 70px;height:50px;">商品2<font color="red">*</font><br>(220*280)</th>
        <td style="width: 50px;text-align:left;height:50px;">
            <input id="upload_second" class="fileupload" name="upload" type="file" name="files[]"
                   data-url="/category/uploadImg.action?width=190&height=100" multiple/>
            <script>
                $(function () {
                    'use strict';
                    // Change this to the location of your server-side upload handler:
                    var url = '/banner/uploadImg.action';
                    var dataType = 'json';
                    if ($.NV('name') == "firefox" || $.NV('name') == "chrome") {
                        dataType = '';
                    }
                    $('#upload_second').fileupload({
                        dataType: dataType,
                        done: function (e, data) {
                            var json = data.result;
                            if (data.result.files == undefined || data.result.files == null) {
                                var jsonStr = data.result + "";
                                jsonStr = jsonStr.substring(0, jsonStr.length - 64);
                                json = $.parseJSON(jsonStr);
                            }
                            $.each(json.files, function (index, file) {
                                if (file.result == "true") {
                                    var width = file.width;
                                    var height = file.height;
                                    if (width == 190 && height == 100) {
                                        $("#pti_second").attr("src", file.url);
                                        $("#skuImgTwo").val(file.url);
                                        //$("#picMsg").html("<font color='green'>(图片尺寸符合规格)</font>");
                                        alert("上传成功!");
                                    } else {
                                        //$("#picMsg").html("<font color='red'>(您上传的图片尺寸不正确,请重新上传)</font>");
                                    }
    
    
                                } else {
                                    alert("上传失败:" + file.errorMsg + "!");
                                }
    
                            });
                        },
                        error: function (e, data) {
                            var json = data.result;
                            try {
                                if (data.result.files == undefined || data.result.files == null) {
                                    var jsonStr = data.result + "";
                                    jsonStr = jsonStr.substring(0, jsonStr.length - 64);
                                    json = $.parseJSON(jsonStr);
                                }
                            } catch (err) {
                                json = e.responseText;
                                if (json == null || json == undefined) {
                                    alert("上传失败.");
                                    return;
                                }
                                json = json.substring(0, json.length - 64);
                                json = $.parseJSON(json);
                            }
                            $.each(json.files, function (index, file) {
                                if (file.result == "true") {
                                    $("#pti_second").attr("src", file.url);
                                    $("#skuImgTwo").val(file.url);
                                    alert("上传成功!");
                                } else {
                                    alert("上传失败:" + file.errorMsg + "!");
                                }
                            });
                        },
                        progressall: function (e, data) {
                            var progress = parseInt(data.loaded / data.total * 100, 10);
                        }
                    }).prop('disabled', !$.support.fileInput)
                            .parent().addClass($.support.fileInput ? undefined : 'disabled');
                });
            </script>
    
            <dd><img id="pti_second" src="$!{bannerApp.skuImgTwo}" width="400px" height="300px" title=""/><span
                    id="picMsg"></span></dd>
            <input type="hidden" id="skuImgTwo" name="skuImgTwo" value="$!{bannerApp.skuImgTwo}"/>
            <input type="hidden" id="skuIdTwo" name="skuIdTwo" value="$!{bannerApp.skuIdTwo}"/>
        </td>
    
    </tr>

    展开全文
  • Ajax实现图片上传到服务器

    千次阅读 2018-12-12 23:38:24
    上一篇文章讲解的是,利用form表单的形式将图片发送给服务器,还讲解了...其实很简单,form表单形式上传图片是设置form表单enctype="multipart/form-data" 而ajax就是监听input的change事件时,获取文件...

    上一篇文章讲解的是,利用form表单的形式将图片发送给服务器,还讲解了如何将图片显示在前端网页,有兴趣可以看一看。将图片从本地上传到服务器的过程详解
    那这篇博客就介绍一下,如何利用Ajax技术实现页面无刷新将图片上传到服务器
    其实很简单,form表单形式上传图片是设置form表单enctype="multipart/form-data"
    而ajax就是监听inputchange事件时,获取到文件var file=$(this)[0].files[0];然后新建一个FormData对象,利用FormData的append()方法将file传入***(在这里就相当于form表单提交数据时input的name属性传参)***
    具体代码如下

    $("#fileupload").change(function() {
        //注意这里不能写错。。。
        var file=$(this)[0].files[0];
        var formData = new FormData();
        formData.append("upload",file);
        //对文件类型进行判断
        var index=file.name.lastIndexOf(".");
        var type=file.name.substring(index);
        if(type!=".jpg"&&type!=".png"){
            alert("只能上传jpg和png格式的图片!!");
            return;
        }
        $.ajax({
            url:"user_UserPicture.action",
            data:formData,
            dataType:"text",
            type:"post",
            //这两个属性必须设置!!!!
            contentType: false,
            processData: false,
            success:function (data) {
                $("#imageview").attr("src","upload/"+data);
            }
        })
    });
    

    然后服务器端怎么接收参数,具体框架有具体的做法,可以参考上一篇博客利用Struts2接受图片的做法。
    将图片从本地上传到服务器的过程详解

    展开全文
  • 下面小编就为大家分享一篇ajax实现上传图片保存后台并读取的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • js+ajax图片上传到服务器

    千次阅读 2018-11-14 09:37:03
    (考虑window系统和linux系统兼容,后期对接口做了调整) 效果:   Html &lt;form id="myForm" action="actorInfo_save" method="post"&gt;  &lt;input type=&...

    (考虑到window系统和linux系统兼容,后期对接口做了调整)

    效果:

     

    Html

    <form id="myForm" action="actorInfo_save" method="post">
        <input type="hidden" id="clicktype" name="clicktype" value="${clicktype }" />
        <input type="hidden" name="id" value="${vbd.id}">
        <div class="col-md-6">
            <label>职业</label>
            <input type="text" name="occupation" class="myinput" value="${vbd.occupation}">
        </div>                                
        <div class="col-md-6">
            <div class="col-md-12">
                <label>血型</label>
                <!-- <input type="text" name="" class="myinput" value=""> -->
            </div>                                    
            <div class="row">
                <div class="col-md-12">
                    <label>配图</label>
                    <input type="hidden" id="picture" name="picture" value="${vbd.picture}">
                    <img id="headPic" name="headPic" alt="请上传封面照片" src="${vbd.picture}" οnerrοr="this.src='../img/logo.jpg'" style='width:240px;height:266px;line-height: 260px;text-align: center;'>
                    <span id="uploadspan" class="btn btn-success fileinput-button" >
                        <span>上传</span>
                        <input id="upload" name="upload" type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" >
                    </span>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <label>主要作品</label>
                    <input type="text" name="magnum_opus" class="myinput" value="${vbd.magnum_opus}">
                </div>
            </div>    
        </div>                                                
    </form>    

    Css略过......

    Js

     //图片上传
           $(function () {
               //只有选择不同图片才会调用,选择同一张不会调用
                $("#uploadspan").change(function (e) {
                    //console.log(e.target.files[0])
                    var file = e.target.files[0] || e.dataTransfer.files[0];
                    if (file) {
                        var reader = new FileReader();
                        reader.onload = function () {
                            $("#headPic").attr("src", this.result);
                        }
                        reader.readAsDataURL(file);
                        //调用上传接口,拿到服务器图片地址,提交表单直接提交服务器src
                       saveImage();
                    }
                });
            })

            function saveImage() {           
               //var file = $("#file").prop('files');file[0].src
               // var file=$("#upload");
                var formData = new FormData();           
                formData.append('upload', $("#upload")[0].files[0]); 
                $.ajax({
                    url: "../upload/img",//文档接口
                    type: "post",
                    data: formData,
                    contentType: false,
                    processData: false,
                    mimeType: "multipart/form-data",
                    success: function (data) {
                        $("#picture").val("../upload/images/"+data);                    
                        console.log(data);
                        alert('上传成功')
                    },
                    error: function (data) {
                       alert('上传失败')
                    }
                });
            }

    Java接口

    package com.wasu.controller;

    import java.io.File;
    import java.io.IOException;
    import java.util.List;
    import java.util.Map;
    import java.util.UUID;
    import java.util.logging.Logger;

    import javax.servlet.http.HttpServletRequest;

    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.multipart.MultipartHttpServletRequest;

    import com.sun.tools.javac.util.Log;

    @Controller
    @RequestMapping("upload")
    public class UploadController {

        @Autowired  
        private HttpServletRequest request;  
         
        @ResponseBody
        @RequestMapping("img")
        public String uploadFilesSpecifyPath(@RequestParam("upload") MultipartFile uploadImg)
                throws Exception {
            String realpath="";
            if(uploadImg!=null){
                long size= uploadImg.getSize();
                if(size < 10485760){//文件设置大小,我这里设置10M。
        
                    String name = uploadImg.getOriginalFilename();//直接返回文件的名字
                    String subffix = name.substring(name.lastIndexOf(".") + 1, name.length());//我这里取得文件后缀
                    String fileName=UUID.randomUUID().toString();//文件保存进来,我给他重新命名,数据库保存有原本的名字,所以输出的时候再把他附上原本的名字就行了。
                    String filepath=request.getRealPath("")+ File.separator + "upload"+File.separator+"images";//获取项目路径到webapp
                    
                    File file=new File(filepath);
                    if(!file.exists()){//目录不存在就创建
                        file.mkdirs();
                    }
                    uploadImg.transferTo(new File(file+File.separator+fileName+"."+subffix));//保存文件
                    realpath=fileName+"."+subffix;
                }
            }
            return realpath;
            
        }

        /**
        * 返回斜杠拼接的字符串
        * @param args
        * @return
         */
        public static String mergeStringWithSeparator(String...args){
            StringBuilder sb=new StringBuilder();
            for (String arg : args) {
                sb.append(arg);
                sb.append(File.separator);
            }
            return sb.substring(0, sb.length()-1).toString();
        }
        public Object add(HttpServletRequest request,@RequestParam( value="files",required=false)MultipartFile multipartFile) throws IllegalStateException, IOException {//这里一定要写required=false 不然前端不传文件一定报错。到不了后台。
            String realpath="";
            //获取文件名
            String name="";
            if(multipartFile!=null){
                long size= multipartFile.getSize();
                if(size >5242880){//文件设置大小,我这里设置5M。
        
                    name=multipartFile.getOriginalFilename();//直接返回文件的名字
                    String subffix = name.substring(name.lastIndexOf(".") + 1, name.length());//我这里取得文件后缀
                    String fileName="123";//文件保存进来,我给他重新命名,数据库保存有原本的名字,所以输出的时候再把他附上原本的名字就行了。
                    String filepath=request.getRealPath("/") + "upload"+File.separator+"images";//获取项目路径到webapp
                    File file=new File(filepath);
                    if(!file.exists()){//目录不存在就创建
                        file.mkdirs();
                    }
                multipartFile.transferTo(new File(file+File.separator+fileName+"."+subffix));//保存文件
                realpath=file+File.separator+fileName+"."+subffix;
                }
            }
            return realpath;
        }}

    展开全文
  • 上传文件或图片时,要求的格式为enctype="multipart/form-data"(以二进制格式上传),在使用ajax上传时需要注意。 html代码: js代码: 当上传完成,我们可以拿控制台的信息: Content-Type:multipart/form...
  • 一般上传图片到服务器有两种方式: 1、把图片转换成二进制直接存储数据库里 2、把图片存储本地目录,并将图片地址存储数据库里 先粗浅地谈下我对这两种存储方法的优劣点的认识: 1、把图片转换成二进制直接...
  • canvas通过ajax上传到服务器

    千次阅读 2019-06-26 10:49:55
    一开始呢,是准备通过json格式上传图片到服务器,但是报了一个没有边界的错误("exception":"the request was rejected because no multipart boundary was found"),查了一下,发现通过form表单上传文件的话,请求...
  • 主要为大家详细介绍了H5移动开发Ajax上传多张Base64格式图片到服务器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 添加引用 <script src="/js/ajaxfileupload.js"></script> js文件 ... 上传附件代码: 1 //文件上传 2 function ajaxFileUpload() { 3 $.ajaxF...
  • JavaScript实现图片上传并预览并提交ajax实现效果实现步骤HTML代码JS代码node.js 服务端代码 实现效果 实现步骤 先有一个文件域,用于选择文件 使用文件域的change事件 在文件选择发生变化的时候去获取文件...
  • ajax上传多图php服务器

    千次阅读 2017-12-31 14:49:59
    一般上传图片到服务器有两种方式:1、把图片转换成二进制直接存储数据库里2、把图片存储本地目录,并将图片地址存储数据库里先粗浅地谈下我对这两种存储方法的优劣点的认识:1、把图片转换成二进制直接存储...
  • 此项目为SSM项目,实现了跨服务器上传图片,并用Ajax技术实现上传图片之后,在页面上立即回显的功能。实现了对商品的修改、查询和删除功能。 图片上传之后保存在ssmImage19项目的upload文件夹中。(上传的资源中包括...
  • ajax上传图片服务器,并预览

    千次阅读 2018-02-24 19:27:09
    http://www.jb51.net/article/118632.htm http://blog.csdn.net/tsing1996/article/details/73740426
  • jq实现图片上传到服务器 //监听图片上传 $(document).on('change','#showIconImgDiv',function (e) { var targetElement = e.target, file = targetElement.files[0]; var fd = new FormData(); fd.append...
  • 需要注意ajax中的formData.append('uploadfile_ant', $('#myFile1')[0].files[0]); //添加图片信息的参数这个uploadfile_ant名字要跟controller中public Object uploadPic(MultipartFile uploadfile_ant,...
  • 最近在做毕业设计,需要做一个批量上传图片的功能。 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=...
  • 下面小编就为大家带来一篇react native实现往服务器上传网络图片的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • struts2+jquery+ajax文件异步上传

    热门讨论 2013-05-30 12:08:57
    struts2+jquery+ajax实现了文件的异步上传,的MyEclipse编写的简单项目
  • 一个使用HttpPost,MultiPartEntity上传图片的demo,含服务器端!亲测可用! 希望对你有用。
  • 非传统ajax上传,实现更方便,使用更方便,二次修改更方便
  • 这几周在做项目的过程中遇到许多问题,这里呢将其中的直接使用ajax上传文件的问题在这里记录分享一下,当时是用的form表单直接提交,但是这样会报一个post方法或者get方法不支持的错误,或者又是报一个找不到上传...
  • http://blog.csdn.net/madcode2222222222222/article/details/78326347
  • 主要介绍了laravel5.5框架的上传图片功能,结合实例形式分析了laravel5.5框架将图片上传到服务器端的相关操作技巧与注意事项,需要的朋友可以参考下
  • 今天完成一个小需求,属于后台web开发的功能:当用户点击按钮上传图片后,图片会上传服务器并显示出来。 【1】图片ajax异步上传 //js 读取图片文件,限制长度宽度 function jsReadFiles(files) { ...
  • 该demo实现前端无刷新请求,实现图片批量上传,后台存储数据,并将数据通过JSON形式反馈给android端显示网络图片
  • 然后就能上传成功了,拿到服务器返回的filename可以用作显示操作等等。 $ ( "#uploadPicFile" ) . click ( function ( ) { var formData = new FormData ( ) ; formData . append ( "file" , $ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,336
精华内容 11,734
关键字:

ajax上传图片到服务器