精华内容
下载资源
问答
  • 用form表单上传文件是出现这个异常:当前请求不是多个请求: 有一下几个原因1:把fomr的属性改成method="post" 如果这个没有解决看 22: 给form表单添加这个属性: enctype="multipart/form-data"...

    在用form表单上传文件是出现这个异常:当前请求不是多个请求: 有一下几个原因

    1:把fomr的属性改成method="post"   如果这个没有解决看 2

    2: 给form表单添加这个属性:  enctype="multipart/form-data" 

    是否解决了呢

    展开全文
  • PhoneGap实现手机表单和手机拍照多个图片上传功能以及...PhoneGap读取远程HTML文件,此HTML文件是普通的表单和实现手机多个图片拍照的页面(包含上传进度条),提交后保存服务器上。具体看下载内容的readme.txt文件。
  • 提交表单上传照片预览

    千次阅读 2018-06-20 10:25:01
    项目名称:H_横店影视股份有限公司 ...上图是未上传状态 上图为传了照片之后 具体代码: HTML: <td rowspan="5" class="photo TD7" id="fileSelect"> ...

    项目名称:H_横店影视股份有限公司
    访问地址:http://gz.gzwhir.com/hdysgf201708152001/zxtjl/index_29.aspx

    具体效果:
    这里写图片描述
    上图是未上传状态

    这里写图片描述
    上图为传了照片之后

    具体代码:
    HTML:

    <td rowspan="5" class="photo TD7" id="fileSelect">
              <div class="uploadbox">
                  <input name="18240_0" id="18240_0" type="file" accept="image/*" class="uploadfile" onchange="domName='18240_0';loadImageFile();" />
               </div>
               <div id="imagePreview_18240_0" class="photo"></div>
                <span>点击上传照片</span>
     </td>

    JS:

    <script type="text/javascript">
         var loadImageFile = (function () {
             if (window.FileReader) {
                 var oPreviewImg = null, oFReader = new window.FileReader(),
    rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
    
                 oFReader.onload = function (oFREvent) {
                     var newPreview = document.getElementById("imagePreview_" + domName);
                     //newPreview.innerHTML = "";
                     oPreviewImg = new Image();
                     //oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";
                     //oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";
                     newPreview.appendChild(oPreviewImg);
                     oPreviewImg.src = oFREvent.target.result;
                     $("#fileSelect span").hide();  //图片预览之后隐藏文字
                 };
    
                 return function () {
                     var aFiles = document.getElementById(domName).files;
                     if (aFiles.length === 0) { return; }
                     if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }
                     oFReader.readAsDataURL(aFiles[0]);
                 }
    
    
             }
             if (navigator.appName === "Microsoft Internet Explorer") {
                 return function () {
                     //alert(document.getElementById(domName).value);
                     document.getElementById("imagePreview_" + domName).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById(domName).value;
                      $("#fileSelect span").hide();  //图片预览之后隐藏文字
                 }
             }
         })();
    
    
       //点击表格模拟点击上传文件控件
       var fileSelect = document.getElementById("fileSelect"),
             fileElem = document.getElementById("18240_0");
    
       function myAddEvent(obj,ev,fn){
           if(obj.attachEvent){
                     obj.attachEvent("on" + ev,fn);
                    }else{
                        obj.addEventListener(ev,fn,false);
                    }
        }
    
    myAddEvent( fileSelect, "click" , function (e) {
           if (fileElem) {
              fileElem.click();
           }
     });
    </script>
    展开全文
  • 表单图片上传

    2017-11-02 16:26:02
    表单图片上传,form图片上传 免缓存 图片上传 图片上传
  • 移动web的开发过程。我们常常会遇到这样问题。就是上传照片。那么我们所知道的上传控件其实有很多。以.NET为例则有FileUpload控件。这个控件上传比较容易。但是样式比较丑陋。接下来我们讲讲如何利用html上传...

    在移动web的开发过程中。我们常常会遇到这样问题。就是上传照片。那么我们所知道的上传控件其实有很多。

    以.NET为例则有FileUpload控件。这个控件上传比较容易。但是样式比较丑陋。

    接下来我们讲讲如何利用html上传照片。

    废话不多说。我们来看一段html代码

    账号头像 *

    修改头像

    从上面的代码我们可以看到。我们上传的控件外部使用的是form表单。enctype:表示的是我们的表单类型

    target:表示表单提交后的跳转页面,表单的提交会刷新页面,为了做到页面无刷新。我们特地设置了一个iframe。设置为隐藏。隐藏的action设置为后台上传图片的后台地址。

    修改头像

    这是上传的控件。主要是input控件设置为file类型。通过

    设置背景图片,具体怎么设置样式和图片。我把CSS贴出来给大家看看。

    /********照片上传***********/

    .upload {width: 32px;height: 32px; background: url('../../Resource/Image/upload.png') no-repeat;}

    .uploading

    {

    width: 16px; height: 16px;margin-left: 15px;

    background: url('../../Resource/Image/icon/sloading.gif') no-repeat;

    background-size: 16px 16px;

    }

    .uploadfile{top: 0;left: 0;width: 32px;height: 32px; opacity: 0; }

    .text{position: absolute; top: 0px;}

    .dib{display: inline-block;}

    .vm{ vertical-align: middle;margin: -5px 5px 5px -4px;}

    .pr{position: relative;}

    .mr10{margin-right: 5px;}

    .upload-box{text-align: left;}OK相信通过上面的代码大家已经知道如何将上传控件进行包装。我们看一下效果图

    b7d369a2e422b2649b73bd959647bbd6.png

    上面的上传图片可自行修改。但是需要注意背景图片需要和上传控件宽高一致。

    那么我们看后台代码怎么去写?

    #region 修改用户头像图片

    private string UpdatePhoto(HttpContext context)

    {

    string result = "";

    System.Web.HttpFileCollection files = context.Request.Files;

    if (files.Count > 0)

    {

    System.Web.HttpPostedFile postedfile = files[0];

    Stream str = postedfile.InputStream;

    StreamReader streamReader = new StreamReader(str);

    byte[] bytes = new byte[1024];

    //地址名字

    string name = DateTime.Now.Ticks+ ".png";

    string fPath = "";

    //本地

    string url = "";

    string tag = "";

    //服务器

    fPath = context.Request.MapPath("../assets/img/avatars");

    url = ConfigurationManager.AppSettings["loginicon"].ToString() + name;

    tag = name;

    FileStream fstr = new FileStream(fPath + "//" + name, FileMode.OpenOrCreate, FileAccess.Write);

    int len = 0;

    while ((len = str.Read(bytes, 0, 1024)) > 0)

    {

    fstr.Write(bytes, 0, len);

    }

    streamReader.Dispose();

    str.Dispose();

    fstr.Flush();

    fstr.Close();

    context.Response.ContentType = "text/html";

    result = "";

    }

    return result;

    }

    #endregion 这是C#中一般处理程序,服务端代码的基本功能将图片上传并保存到指定目录。同时返回一段js代码。该JS代码可以将图片的保存路径等返回到界面。

    展开全文
  • 1.让图片formData放在表单formData一起上传,实现不了,目前前台获取不到图片的本地地址; 2.让图片的 vm.$refs.upload.submit() 放在post上传表单的函数下上传,这样会请求后台两次,并速度也很慢; 3.那就让...

    如下图,需求要实现点击一个按钮,可以让表单的内容和图片一起上传,只请求后台一次!

    思路:

    1.让图片formData放在表单formData中一起上传,实现不了,目前前台获取不到图片的本地地址;

    2.让图片的 vm.$refs.upload.submit() 放在post上传表单的函数下上传,这样会请求后台两次,并速度也很慢;

    3.那就让表单formData放在图片formData中,随着图片一起上传,这个实现了,具体代码如下:

    <style>
        input[type="file"] {
            display: none;
        }
    
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
    
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
    
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
    
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
    <div class="upload-image">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="活动名称" prop="name">
                <el-input v-model="ruleForm.name" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="上传图片" ref="uploadElement" prop="imageUrl">
                <el-input v-model="ruleForm.imageUrl" v-if="false"></el-input>
                <el-upload
                        class="avatar-uploader"
                        ref="upload"
                        :show-file-list="false"
                        action="/index/upload"
                        :before-upload="beforeUpload"
                        :on-change="handleChange"
                        :auto-upload="false"
                        :data="ruleForm">
                    <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script>
        var uploadImageVue = new Vue({
            el: '.upload-image',
            data: {
                ruleForm: {
                    name: '',
                    imageUrl: '',
                },
                rules: {
                    name: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                    ],
                    imageUrl: [
                        {required: true, message: '请上传图片', trigger: 'blur'},
                    ],
                }
            },
            methods: {
                submitForm(formName) {
                    let vm = this;
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            vm.$refs.upload.submit();
                        } else {
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                    this.ruleForm.imageUrl = '';
                },
    
                handleChange (file, fileList) {
                    this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
                },
    
                beforeUpload(file) {
                    return true;
                },
            }
        })
    </script>

    中间实现了很多小技巧,比如:

    1.预览图片;

    2.利用input实现图片上传与否的验证。

    3.样式等;

    ps:更详细的讲解,欢迎浏览个人网站:https://caohongyuan.com/

    欢迎指导,有啥问题下面留言。

    千而的大狮子~

     

    展开全文
  • FormData 对象,可以把form所有表单元素的name与value组成一个queryString,提交到后台。使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量。使用FormData对象1.创建一个FormData空对象,然后...
  • 之前公司的Java工程师比较厉害,所以我前端上传一个通过编码的NSString或者NSData类型的数据,就可以上传成功,现在因为此Java工程师没做过,所以为了实现类似于发布照片或小视频这样的功能,不得已将内容以表单的...
  • 但是有些场合,用表单获取文件是一件比较困难的事情,比如客户端上,用 Canvas 生成了一幅图片,希望把它上传到以上社交网络的相册该怎么办呢? 第一种方法是使用显式的表单,将 Canvas 生成的图片保存...
  • 当我们提交表单时,希望对用户的输入进行即刻检查,而不是等到最终提交之时,... 已上传0张照片 JS部分: (1)引入JQuery FROM库 (2)文件输入框变化时(选择了文件),触发事件change调用ajaxS
  • ENCTYPE="multipart/form-data"用于表单里有图片上传。    表单标签设置enctype="multipart/form-data"来确保匿名上载文件的正确编码。  如下: (这里是struts项目的一个上传) 选择照片 照片...
  • 所有只能自己另个模仿一个表单上传 <input class=file name=file type=file accept=image/png,image/gif,image/jpeg @change=update/> let file = e.target.files[0]; let param = new Form
  • 表单中使用antd组件库的上传组件的文件(图片)上传、预览、删除。删除由组件自带,本篇主要讲解上传和预览功能。 1、这里使用了react的useState,定义了初始化变量 const [fileList, setFileLists] = useState([])...
  • layui通过表单上传图片: 项目场景:项目练习时候遇到一个问题,使用layui框架时表单提交图片时遇到的问题。 思路: 因为表单的数据要提交到数据库就需要考虑图片数据库的方式。 有两种存取方式: 把...
  • wordpress表单调用Do you need to have your website visitors upload files on your contact form? 您是否需要让网站访问者您的联系表上上传文件? Maybe you’re hiring employees and want to collect ...
  • dropboxDo you want to create a Dropbox upload ... 您是否要WordPress创建Dropbox上传表单? A contact form with a file upload option could be hard to manage if you are getting too many attachment...
  • layui同时将表单数据和上传的图片路径添加至数据库的具体方法如下: HTML代码如下 (省略了点) <form class="layui-form" id="fm" enctype="multipart/form-data"> <div class="layui-form-item"&...
  • Form表单中的图片上传

    2021-06-02 14:16:34
    一、图片上传具体实现 const MyForm = () => { const [activityChart, setActivityChart] = useState([]);//用函数式组件来定义状态值 const options = { resize: false, //裁剪是否可以调整大小 ...
  • ## 安卓机调用相机拍的照片用formdata上传,php获取到的为空 求助大神,万分感谢! (我这用的是TP框架) html: ![html:](https://img-ask.csdn.net/upload/201705/10/1494420802_866320.png) jq: ![jq...
  • jsp表单和图片一起上传,适合做个人资料上传时上传照片和个人信息
  • 为什么 一加手机微信公众号表单填写,拍照上传的填写时,拍照之后直接退出表单提交页面,这是为什么,急求原因???help!
  • 一、基础表单上传图片上传input样式重置,可自定义。yfrom 表单必须添加该属性 enctype="multipart/form-data",否则发送不出选择的数据.btn .btn-primary .upload-picture-btn{上传按钮样式自定义.....input type ...
  • 正式的项目,不可能只提交一个照片当作一张表,还会有关于照片的信息,那么基于servletfileupload怎么进行判断才能同时将表单中照片跟信息同时上交呢? 代码跟上,里面有详细注释:同时还需要两个jar包: ...
  • Bootstrap 是 2011 年八月 GitHub 上发布的开源产品。 Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将 Bootstrap 基本结构 部分详细讲解。 CSS:Bootstrap ...
  • FormData 对象,可以把form所有表单元素的name与value组成一个queryString,提交到后台。使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量。 使用FormData对象 1.创建一个FormData空对象,然后...
  • node 全面解析表单的图片上传 ,multiparty解析与内容类型的HTTP请求multipart/form-data,也被称为文件上传。 multiparty安装 npm install multiparty html代码 <form action="/api/uppic" method="post" >...
  • ---- FormData利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件FormData...
  • 一、问题描述文件上传下载时,form表单中设置属性enctype=“multipart/form-data”的情况下,如何获取表单提交的有关用户信息的值?(比如:textfield、radio等属性的值)二、解决方法1、情况一:没有对user对象...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,468
精华内容 3,387
关键字:

如何在表单中上传照片