//上传文件
function UploadFile(el) {
var dataValue = $(el).attr("data-id");
var ele = dataValue.toLowerCase();
var f = document.getElementById('uploadFile_'+ele).files[0]
var src = window.URL.createObjectURL(f);
document.getElementById('uploadPreview_' + ele).src = src;
top.$("#uploadPreview_" + ele).attr("src", src);
$("#upload_msg_" + ele).text("上传中,请稍候...");
//上传应用图标
$.ajaxFileUpload({
url: "../../Manage/Flow/UploadFile",
secureuri: false,
fileElementId: ['uploadFile_' + ele],
dataType: 'json',
success: function (data) {
if ((data.message).indexOf('error') >= 0) {
$("#upload_msg_" + ele).text(data.message);
$("#upload_msg_" + ele).css("color", "red");
} else {
$("#" + dataValue).val(data.message);
$("#upload_msg_" + ele).text("上传成功!");
$("#upload_msg_" + ele).css("color", "#0a9a2f");
}
}
});
}

注意要加载上传组件js .下载地址:https://blog-static.cnblogs.com/files/firstcsharp/ajaxfileupload.js

关于后台的上传代码就不用说了吧?网上一大把

C# MVC Ajax上传多个图片,可预览,可重复上传等的更多相关文章

  1. jQuery+Ajax实现图片的预览和上传

    jQuery+Ajax实现图片的预览和上传 1.配置Spring-web.xml <!-- springmvc上传图片 --> <bean id="multipartRes ...

  2. Android图片上传,可以选择多张图片,缩放预览,拍照上传等

    仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 ...

  3. Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等

    仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 ...

  4. 纯javascript代码实现浏览器图片选择预览、旋转、批量上传

    工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本 其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点: 1. IE input type=file的图片预览要用I ...

  5. Thinkphp5+plupload图片上传功能,支持实时预览图片。

    今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...

  6. 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器

    前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...

  7. jQuery + ashx 实现图片按比例预览、异步上传及显示

    目录(?)[-] 注ajax 方式异步读取数据库显示图片的方法同上传一致使用 ashx 返回base64字符串在客户端处理即可 记录一个让我纠结良久的问题 在Page_Load 函数中只有第一个用 S ...

  8. .net core版 文件上传/ 支持批量上传,拖拽以及预览,bootstrap fileinput上传文件

    asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:n ...

  9. java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载

    java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载 实现功能:zip文件上传,后台自动解压,Jstree树目录(遍历文件),editor.md预览 采用Spring+Sp ...

  10. 浅谈简单实现file控件的图片预览,裁剪和上传。

    1.图片预览之FileReader对象    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据 ...

随机推荐

  1. angularcli 第一篇(新建、组件、模块)

    1.新建并启动项目: 1.安装: npminstall -g @angular/cli 2.新建: ng new mytest 3.进入项目:cd mytest 4.启动: ng serve 5.打开 ...

  2. C++Primer第五版 练习8.6答案详解

    重写7.1.1节书店程序(第299页),从文件中读取一个交易记录.将文件名作为一个参数传递给main. 本题所需源文件如下: Sales_data.h文件: #pragma once #include ...

  3. java基础(13)---集合框架

    一.集合框架 Java的集合类是一些非常实用的工具类,主要用于存储和装载数据 (包括对象),因此,Java的集合类也被成为容器.在Java中,所有的集合类都位于java.util包下,这些集合类主要是 ...

  4. codevs 1341 与3和5无关的数

    题目描述 Description 有一正整数a,如果它能被x整除,或者它的十进制表示法中某位上的数字为x,则称a与x相关.现求所有小于等于n的与3或5无关的正整数的平方和. 输入描述 Input De ...

  5. jupytext library using in jupyter notebook

    目录 1. jupytext features 2. Way of using 3. usage 4. installation 1. jupytext features Jupytext can s ...

  6. LINQ查询表达式(4) - LINQ Join联接

    内部联接 按照关系数据库的说法,“内部联接”产生一个结果集,对于该结果集内第一个集合中的每个元素,只要在第二个集合中存在一个匹配元素,该元素就会出现一次. 如果第一个集合中的某个元素没有匹配元素,则它 ...

  7. PHP——curl设置请求头需要注意哪些

    前言 在设置这个请求头上踩了一些坑,此文记录下. 步骤 设置请求头 curl_setopt($ch, CURLOPT_HTTPHEADER, $header); 请求头写法 一定不要忘记:不然进行请求 ...

  8. [React] Write a Custom React Effect Hook

    Similar to writing a custom State Hook, we’ll write our own Effect Hook called useStarWarsQuote, whi ...

  9. LOJ P10065 北极通讯网络 题解

    每日一题 day39 打卡 Analysis 1.当正向思考受阻时,逆向思维可能有奇效. 2.问题转化为:找到最小的d,使去掉所有权值>d的边之后,连通支的个数<k; 3.定理:如果去掉所 ...

  10. learning AWT Jrame

    import java.awt.*; public class FrameTest { public static void main(String[] args) { var f = new Fra ...